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

HTML

$（“#下一步按钮”）。单击（“.item:not（.active）”，函数（事件）{
$（.item.active），event.delegateTarget.removeClass（“active”）；
$（this.next（）.addClass（“active”）；
});

我正在尝试将

活动的
添加到下一个
.item
类中，并从上一个类中删除
.item
。。很简单，我知道

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

基本上有两种方法可以将活动项添加到
。一种是从“下一步”按钮添加，另一种是从您将在小提琴中看到的类似导航的内容添加


由于各种原因，您目前拥有的将永远无法发挥作用，主要原因包括：

您的
.items
都不是
#next按钮
的子项
使用
。单击
不会委派。在您的示例中，
。.item:not（.active）
是传递给处理程序的数据

如果有人单击
#next按钮
时您试图这样做，则
活动类将移动：

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

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

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

由于各种原因，您目前拥有的将永远无法发挥作用，主要原因包括：

您的
.items
都不是
#next按钮
的子项
使用
。单击
不会委派。在您的示例中，
。.item:not（.active）
是传递给处理程序的数据

如果有人单击
#next按钮
时您试图这样做，则
活动类将移动：

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

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

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

请尝试以下代码：

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

我不清楚您的“还有一件事”。与lumosity类似，当您单击其中一项时，它会将
.active
添加到相应的块中，顶部有一个面包屑导航。。。块具有数据类别，可单击按钮具有数据id。。单击的内容会将
.active
添加到匹配的类别中为什么会得到-1？？我不清楚您的“还有一件事”。与lumosity类似，当您单击其中一个项目时，它会将
.active
添加到相应的块中，顶部会有一个面包屑导航。。。块具有数据类别，可单击按钮具有数据id。。单击的内容会将
.active
添加到匹配的类别中为什么会得到-1？？谢谢，我甚至不知道存在.filter回调，我将研究这段代码，我相信我将来会有很多用途。谢谢，我甚至不知道有一个.filter回调存在，我将研究这段代码，我相信我在将来会有很多用途。它就像一个符咒。