代码之家 › 专栏 › 技术社区 › ultraloveninja

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

show-hide pagination css jquery javascript

0

ultraloveninja · 技术社区 · 7 年前

我正在尝试通过添加和删除一些类来找出显示和隐藏带有“上一个”和“下一个”按钮的一系列div的最简单方法。

到目前为止,我可以得到下一个按钮触发,但它添加了 active 给所有的女主角上课,而不仅仅是下一个。

我已经阅读了其他的例子,到目前为止,他们似乎真的臃肿或不是我要找的具体。

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

代码笔链接: 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 回复 | 直到 7 年前

1

2

Eugene Tsakh 7 年前

基本上,您应该获取最后一个活动元素,然后在它之后激活下一个:

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

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

当前代码中的问题是获取所有项并执行 hasClass 所以它总是返回true,因为这个类至少有一个元素,然后在每个item元素和add之后得到下一个元素 active 类,这样所有元素都会在结果中被激活。

2

1

Pablo DbSys 7 年前

我想你想要这样的东西

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