Question

我想创建一个将类添加到下一个和上一个元素的分页。我生成了一个代码，但不能很好地工作。我认为这是一种非常常见的情况，也许我使用的是错误的代码。我怎样才能改进我的代码？

  var $curr = $( "div.active" );

  $( ".prev" ).click(function() {

    if ($($curr).is(':first-child')){
      $('.prev').hide();
    }else{
      $('.next').show();
      $curr = $curr.prev();
      $( "div" ).removeClass('active');
      $curr.addClass('active');

    }
  });


  $( ".next" ).click(function() {

    if ($($curr).is(':last-child')){
      $('.next').hide();
    }else{
      $('.prev').show();
      $curr = $curr.next();
      $( "div" ).removeClass('active');
      $curr.addClass('active');

    }
  });

Answer 1

只需使用prev()或next()并检查元素是否已被检索，即可改善您的逻辑。如果不是，那么只需在集合中获得first()或last()单挑div。试试这个：

$(".prev").click(function () {
    var $active = $('.active').removeClass('active');
    var $prev = $active.prev('div');
    if ($prev.length == 0)
           $prev = $active.siblings('div').last();
    $prev.addClass('active');
});


$(".next").click(function () {
    var $active = $('.active').removeClass('active');
    var $next = $active.next('div');
    if ($next.length == 0)
           $next = $active.siblings('div').first();
    $next.addClass('active');
});

Example fiddle

Answer 2

使用活动dom元素的索引可能更容易：

＆＃13;

var index = 5;

$('button').click(function() {
  var lastIndex = index;
  index += this.className == 'prev' ? -1 : 1;
  var thisChild = $('div:nth-child(' + index + ')');
  if (thisChild.get(0)) {
    $('.active').removeClass('active');
    thisChild.addClass('active');
  } else {
    index = lastIndex;
  }
});

＆＃13;

div {
  width: 40px;
  height: 40px;
  margin: 10px;
  float: left;
  border: 2px blue solid;
  padding: 2px;
}
span {
  font-size: 14px;
}
p {
  clear: left;
  margin: 10px;
}
.active {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div class='active'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>
  <button class='prev'>Go to Prev</button>
</p>
<p>
  <button class='next'>Go to next</button>
</p>

＆＃13;

Answer 3

在检查第一个/最后一个之前尝试显示/隐藏块。此外，最好将块包装到公共容器中，以避免对不相关的兄弟姐妹进行意外迭代。

var $blocks = $('.blocks > div'),
    $curr = $blocks.filter(".active");

$(".prev").click(function () {
    $curr = $curr.prev();
    $blocks.removeClass('active');
    $curr.addClass('active');
    
    if ($curr.is(':first-child')) {
        $('.prev').hide();
    }
    else $('.next').show();
});


$(".next").click(function () {
    $curr = $curr.next();
    $blocks.removeClass('active');
    $curr.addClass('active');
    if ($curr.is(':last-child')) {
        $('.next').hide();
    }
    else $('.prev').show();
});

.blocks div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px blue solid;
    padding: 2px;
}
p {
    clear: left;
    margin: 10px;
}
.active {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks">
    <div></div>
    <div></div>
    <div></div>
    <div class='active'></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<p>
    <button class='prev'>Go to Prev</button>
</p>
<p>
    <button class='next'>Go to Next</button>
</p>

jquery prev和下一个相邻的兄弟姐妹

3 个答案: