javascript - 使用 jQuery 简单的下一个和上一个显示和隐藏

Question

我试图找出最简单的方法来通过添加和删除一些类来显示和隐藏一系列带有 Previous 和 Next 按钮的 div。

到目前为止，我可以触发 Next 按钮，但它会将 active 类添加到所有 div，而不仅仅是下一个。

我一直在通读其他示例，到目前为止，它们看起来真的很臃肿，或者不是我要找的东西。

这是我目前所拥有的:

Codepen 链接: 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 的情况下单独定位下一个 div。

Answer 1

基本上你应该得到你的最后一个事件元素并在它之后激活下一个:

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

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

您当前代码中的问题是您正在获取所有元素并对所有元素执行 hasClass 因此它始终返回 true 因为此类至少有一个元素然后您在每个元素元素之后获取下一个元素，并向它们添加 active 类，以便在结果中激活所有元素。