Простой следующий и предыдущий Показать и скрыть с помощью jQuery - PullRequest
Новая
       36

Простой следующий и предыдущий Показать и скрыть с помощью jQuery

0 голосов
/ 12 октября 2018

Я пытаюсь найти самый простой способ показать и скрыть серию div с кнопками Previous и Next, добавив и удалив некоторые классы.

До сих пор я мог заставить кнопку Next срабатывать, но он добавляет класс active ко всем элементам div, а не только к следующему в строке.

Я читал другие примеры, и пока они кажутся раздутыми или не такими, как я ищудля конкретно.

Вот что у меня пока так:

Кодовая ссылка: https://codepen.io/ultraloveninja/pen/pxrrmy/

HTML: 

<div class="group">
  <div class="item active">
    <h2>Thing One</h2>
  </div>
  <div class="item">
    <h2>Thing Two</h2>
  </div>
  <div class="item">
    <h2>Thing Three</h2>
  </div>
</div>
<div class="btns">
  <a href="#" class="btn prev">Previous</a>
  <a class="btn next" href="#">Next</a>
</div>

JS: 

$('.next').on("click", function(){
  if($('.item').hasClass('active')) {
    $('.item').next().addClass('active');

  }
})

CSS: 

body {
  padding: 10px;
}
.active {
  display:block !important;
}

.item {
  display:none;
}

Кажется, это должно быть довольно просто,но я не могу думать о том, как нацелиться на следующий div, пока он не покажет все остальные.

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Я думаю, вы хотите что-то вроде этого 

$('a.next').on("click", function(){
  var a = $('.item.active').last();
  a.next().addClass('active');
  a.removeClass('active')
});
0 голосов
/ 12 октября 2018

По сути, вы должны получить свой последний активный элемент и активировать следующий после него: 

$('.next').on("click", function(){
  const $active = $('.item.active');
  const $next = $active.next();

  if ($next.length) {
    $active.removeClass('active');
    $next.addClass('active');
  }
})

Проблема в вашем текущем коде состоит в том, что вы получаете все элементы и выполняете hasClass на всех них, так чтовозвращает true все время, потому что есть хотя бы один элемент с этим классом, а затем вы получаете следующий элемент после каждого элемента item и добавляете к ним active класс, чтобы все ваши элементы были активированы в результате.

...