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

FIDDLE

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

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

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

Answer 1

你现在所拥有的东西将永远不会因为各种原因而起作用，其中主要是：

您的.items都不是#next-button的孩子。
使用.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

DEMO

$("#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');
  } 
})

向下一个元素添加/删除类的最佳方法是什么？

3 个答案: