Javascript 使用jQuery进行简单的下一个和上一个显示和隐藏

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

到目前为止，我可以触发Next按钮，但它将

active

类添加到所有div中，而不仅仅是行中的下一个div

我一直在阅读其他的例子，到目前为止，它们看起来真的很臃肿，或者不是我特别想要的

以下是我目前掌握的情况：

代码笔链接：

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>

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

  }
})

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

.item {
  display:none;
}

CSS:

<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>

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

  }
})

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，因为该类中至少有一个元素，然后在每个项目元素之后获取下一个元素，并将

active

类添加到这些项目中，以便激活所有元素结果。

基本上，您应该获取最后一个活动元素，并在其之后激活下一个：

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

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

---

当前代码中的问题是，您正在获取所有项目，并对所有项目执行

hasClass

，因此它始终返回true，因为该类中至少有一个元素，然后在每个项目元素之后获取下一个元素，并将

active

类添加到这些项目中，以便激活所有元素结果是。

我想你想要这样的东西

$('a.next').on("click", function(){
  var a = $('.item.active').last();
  a.next().addClass('active');
  a.removeClass('active')
});

---

我想你想要这样的东西

$('a.next').on("click", function(){
  var a = $('.item.active').last();
  a.next().addClass('active');
  a.removeClass('active')
});

---

这可以通过显示下一个div来工作，但不会删除上一个类。谢谢！现在，如果我能弄清楚如何让它在类结束时停止删除该类，那就太好了！史诗！谢谢现在这是有道理的。使用长度来通过检查比我尝试的路线要容易得多，哈哈！再次感谢！这可以通过显示下一个div来工作，但不会删除上一个类。谢谢！现在，如果我能弄清楚如何让它在类结束时停止删除该类，那就太好了！史诗！谢谢现在这是有道理的。使用长度来通过检查比我尝试的路线要容易得多，哈哈！再次感谢！亲爱的，这有用！但是你知道如何让它停止删除类，如果它击中最后一个div？另一方面，如果有人再次单击“下一步”按钮，它将删除该类并清空所有内容。Am。。。我想正在验证（$（'.item:last'）.hasClass（'active'））Hmmm是否正确。是的，我试着用一些其他的逻辑来测试它，结果变得一团糟。我认为检查它是否在最后一个元素上是很容易的，然后停止删除该类！但是你知道如何让它停止删除类，如果它击中最后一个div？另一方面，如果有人再次单击“下一步”按钮，它将删除该类并清空所有内容。Am。。。我想正在验证（$（'.item:last'）.hasClass（'active'））Hmmm是否正确。是的，我试着用一些其他的逻辑来测试它，结果变得一团糟。我认为检查它是否在最后一个元素上是很容易的，然后停止删除该类。