Смена контента по клику
Помогите домозговать как сделать смену(контента) даже вернее блока, если предположим у меня есть какое-то колв. одинаковых блоков.
<div class="container">Содержимое</div> <div class="container">Содержимое</div> <div class="container">Содержимое</div>
$('.slider').hide();
var select= $('.slider:eq(0)');
select.show();
$('.next').click(function(){
select.hide();
select=select.next();
if (тут как-то хочу проверить если закончиличь блоки-чтобы выбрал опять первый только как это сделать в таком случаи?){
select = $('.slider:eq(0)');
};
select.show();
return false;
});
|
new_developer,
if(!select.length) |
рони,
не работает так, всего 2 блока и полсе 2 заканчивается всё
if (!select.length){
select = $('.slider:first-child');
}
|
вот весь скрипт
$(function(){
$('.slider').hide();
var select= $('.slider:first-child');
select.show();
$('.next').click(function(){
select.hide();
select=select.next();
if (!select.length){
select= $('.slider:first-child');
}
select.show();
return false;
});
$('.prev').click(function(){
select.hide();
select=select.prev();
if (!select.length){
select = $('.slider:last-child');
};
select.show();
return false;
});
});
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider:not(:first-child){
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
// $('.slider').hide();
var select = $('.slider:first-child');
// select.show();
$('.next').click(function(){
select.hide();
select=select.next();
if (!select.length){
select= $('.slider:first-child');
}
select.show();
return false;
});
$('.prev').click(function(){
select.hide();
select=select.prev();
if (!select.length){
select = $('.slider:last-child');
};
select.show();
return false;
});
});
</script>
</head>
<body>
<div>
<div class="slider">Содержимое1</div>
<div class="slider">Содержимое2</div>
<div class="slider">Содержимое3</div>
</div>
<p class="next">next</p><p class="prev">prev</p>
</body>
</html>
|
у вас вижу хорошо работает пример. У меня тоже самое prev когда жму всё ок, а с next обрывается когда заканчиваются блоки
не могу понять с чем это связано, вроде всё идентично
$(function(){
// $('.slider').hide();
var select = $('.slider:first-child');
// select.show();
$('.next').click(function(){
select.hide();
select=select.next();
if (!select.length){
select= $('.slider:first-child');
}
select.show();
return false;
});
$('.prev').click(function(){
select.hide();
select=select.prev();
if (!select.length){
select = $('.slider:last-child');
};
select.show();
return false;
});
});
разметка таже, стиль добавил |
как можно отыскать причину? отдельно создал страницу всё работает
|
рони,
если убераю в разметке обвертку блоков <div></div> то перестает работать почему так?) |
Если так всё работает
<div> <div class="slider">Содержимое1</div> <div class="slider">Содержимое2</div> <div class="slider">Содержимое3</div> </div> <p class="next">next</p><p class="prev">prev</p> чуть меняем уже работает не так как должа <div> <div class="slider">Содержимое1</div> <div class="slider">Содержимое2</div> <div class="slider">Содержимое3</div> <p class="next">next</p><p class="prev">prev</p> </div> |
Цитата:
вы же писали Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider:not(:first-child){
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
// $('.slider').hide();
var select = $('.slider:first');
// select.show();
$('.next').click(function(){
select.hide();
select=select.next('.slider');
if (!select.length){
select= $('.slider:first');
}
select.show();
return false;
});
$('.prev').click(function(){
select.hide();
select=select.prev('.slider');
if (!select.length){
select = $('.slider:last');
};
select.show();
return false;
});
});
</script>
</head>
<body>
<div>
<div class="slider">Содержимое1</div>
<div class="slider">Содержимое2</div>
<div class="slider">Содержимое3</div>
<p class="next">next</p><p class="prev">prev</p>
</div>
</body>
</html>
|
рони,
может я не так обьясняю что хочу.. Попробую ещё раз у меня вот как выглядит полностью разметка.
<div class="small-12 columns microbus-container-mobile hide-for-medium">
<div class="wrap-large">
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
</div>
</div>
<div class="small-12 columns">
<div class="small-2 columns small-centered">
<a class="prev" href=""></a>';
<a class="next" href=""></a>';
</div>
</div>
3 блока слайдер , хочу чтобы они по нажатию на next перешёлкивались по кругу бесконечно, и также на prev только в обратную сторону... В предыдущем варианте с prev всё работало отлично, а next почему-то после последнего блока делал последний блок display:none; и всё этим заканчивалось |
рони,
Всё разобрался спасибо.. Увидел у вас что можно к next(Сюда добавить куда дальше). |
| Часовой пояс GMT +3, время: 23:15. |