jQuery的简单下一个和上一个显示和隐藏

超爱忍者

我试图通过添加和删除一些类来找出使用上一个和下一个按钮显示和隐藏一系列div的最简单方法。

到目前为止，我可以触发“下一步”按钮，但是它将active类添加到所有div中，而不仅仅是行中的下一个。

我一直在阅读其他示例，到目前为止，它们似乎真的很ated肿，或者不是我想要的。

这是我到目前为止的内容：

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。

尤金·察克

基本上，您应该获得最后一个活动元素，然后在其后激活：

$('.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类对他们来说，您的所有元素都会被激活。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。