Question

我几乎在那里，但我的jQuery没有在合适的时间添加课程，只需额外两次点击。

jQuery的：

  var currentItem = $('.item').filter('.active');

  $('#next-button').on('click', function () {
      var nextItem = currentItem.next();
      currentItem.removeClass('active');

      //Here is the meat of the code, its adding the class a few clicks later than I want.
      if (nextItem.length) {
          currentItem = nextItem.addClass('active');
      } else if (nextItem.length == 0) {
          $('.item:last').addClass('red');
          alert('class red added');
      }

  });

HTML：

jQuery应该在单击#next-button时将类添加到最后一项我们将.active添加到.next()项，但是如果nextItem == 0我们添加类红色问题是它发生了两次点击。

检查fiddle以了解我的意思。

  <div class="item active" data-category="sharks">content1</div>
  <div class="item" data-category="tigers">content2</div>
  <div class="item" data-category="lions">content3</div> 
  <a href="#" class="btn btn-primary" id="next-button" rel="nofollow">Next</a>

WOW所有这些答案都很好！谢谢你们！

Answer 1

希望我理解你的问题，你想要的是当它是列表中的最后一项时，只需将颜色变为红色即可。如果这是你的问题，那么这段代码肯定会帮助你

试试这个：

HTML：

<div class="item active" data-category="sharks">content1</div>
<div class="item" data-category="tigers">content2</div>
<div class="item" data-category="lions">content3</div> <a href="#" class="btn btn-primary" id="next-button" rel="nofollow">Next</a>

脚本：

    var currentItem = $('.item').filter('.active');

    $('#next-button').on('click', function () {
        var nextItem = currentItem.next();
        currentItem.removeClass('active');

        if (nextItem.length) {
            currentItem = nextItem.addClass('active');
            if (nextItem.length <= 1) {
                $('.item:last').addClass('red');
            }
        } else if (nextItem.length == 0) {
            alert('class red added');
        }

    });

CSS：

.item {
    display: none;
}
.active {
    display: block;
}
.red {
    color: red;
}

Fiddle

Answer 2

问题是由.next方法的使用引起的，没有指定其他选择器。在您的情况下，在最后一项之后选择超链接next-button。

您可以这样使用.next方法：

var nextItem = currentItem.next('.item');

所以不会选择最后一个元素链接。

我还建议移动这行代码：

currentItem.removeClass('active');

在if块内，以避免删除最后一项的active类。

试一试：jsFiddle

Answer 3

fiddle

.next()会给你下一个兄弟姐妹。 .next('.item')将为您提供课程项目的下一个兄弟。

此外，不需要过滤器。你可以这样做。

var currentItem = $（'。item.active'）;

$('#next-button').on('click', function () {
    var nextItem = currentItem.next('.item');

    if (nextItem.length) {
        currentItem.removeClass('active');
        currentItem = nextItem.addClass('active');
    } else if (nextItem.length == 0) {
        $('.item:last').addClass('red');
        alert('class red added');
    }

});

Answer 4

尝试

var items = $('.item'), currentItem = items.filter('.active'), last = items.last();

$('#next-button').on('click', function () {
    currentItem.removeClass('active');
    var nextItem = currentItem.next();

    if (nextItem.length) {
        currentItem = nextItem.addClass('active');
        if (currentItem.is(last)) {
            $('.item:last').addClass('red');
        }
    }
});

演示：Fiddle

当.next（）到达.length（）的结尾时添加类？

4 个答案:

fiddle