1

我快到了，但我的 jQuery 没有在正确的时间添加类，还有额外的两次点击。

看看这个小提琴：http: //jsfiddle.net/X7L8q/4/

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：

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

检查小提琴以了解我的意思。

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

哇，所有这些答案都很好！多谢你们！

4

4 回答 4

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

小提琴

于 2013-08-08T07:39:32.830 回答
1

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

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

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

所以在最后一个元素链接之后不会被选中。

另外我建议移动这行代码：

currentItem.removeClass('active');

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

试试看：jsFiddle

于 2013-08-08T07:41:13.697 回答
1

小提琴

.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');
    }

});
于 2013-08-08T07:41:55.643 回答
1

尝试

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');
        }
    }
});

演示：小提琴

于 2013-08-08T07:42:21.717 回答