jquery - 将类添加/删除到下一个元素的最佳方法？

Question

HTML

 <div class="item active" data-category="sharks">
 <div class="item" data-category="tigers">
 <div class="item" data-category="lions">

 <a href="#" class="btn btn-primary" id="next-button" rel="nofollow">Next</a>

$("#next-button").click(".item:not(.active)", function (event) {
    $(".item.active", event.delegateTarget).removeClass("active");
    $(this).next().addClass("active");
});

小提琴

我正在尝试添加active到下一个.item课程并.item从上一个课程中删除......我知道很容易。

.active还有一件事，当点击特定的数据 ID 时，如何将其添加到匹配的数据类别中？

基本上有两种方法可以.item从下一个按钮添加活动，然后从导航中添加你将在小提琴中看到的东西

Answer 1

由于各种原因，您目前拥有的东西永远不会起作用，其中最主要的原因是：

1. 你的都没有.items都不是#next-button.
2. 使用.click不委托。在你的例子中，".item:not(.active)"是传递给处理程序的数据。

如果你试图做到这一点，当有人点击#next-button班级active移动时：

var items = $('div.item');
var currentItem = items.filter('.active');
$('#next-button').on('click', function() {
    var nextItem = currentItem.next();
    currentItem.removeClass('active');
    if ( nextItem.length ) {
        currentItem = nextItem.addClass('active');
    } else {
        // If you want it to loop around
        currentItem = items.first().addClass('active');
    }
});

如果要单击项目并进行更改：

var items = $('div.item').on('click', function() {
    var target = $(this);
    if ( ! target.hasClass('active') ) {
        $(this).addClass('active').siblings('.active').removeClass('active');
    }
});

Answer 2

演示

$("#next-button").click(function (event) {
    $(".item.active").removeClass("active").next().addClass("active");
});
$(".breadcrumb-label").click(function (event) {
    $(".item.active").removeClass("active").siblings('[data-category="'+this.innerHTML+'"]').addClass("active");
});

Answer 3

试试这个代码：

$('#next-button').click(function(){
  var item = $('div.item.active');
  item.removeClass('active');
  item.next().addClass('active');
  if(item.next().length == 0){
    $('div.item').first().addClass('active');
  } 
})