javascript - 休息.next()吗？我的点击功能两次添加了“.active”？

如果您看一下fiddle，它看起来不错，但是如果您单击“下一步”并向下移动2至3次，然后单击“内存”（在顶部导航中），它将使.active返回第一个，

然后，如果再次单击“下一步”，它将继续从上一个元素移到下一个元素。

我试图重置它，然后根据我们在点击顶部导航后的去向继续。

错误的jQuery：两个单击功能都添加了活动

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)) {
         $('#slide-buttons').addClass('red');
      }
    }

    var items = $('.item');
      $(".breadcrumb-cell .breadcrumb").click(function () {
       var theID  = $(this).data("id");

items.filter(function() {
    return $(this).data('category') === theID;
}).addClass('active');

});

 });

Fiddle

我用谷歌搜索“如何重置.next（）jQuery”，但找不到任何东西，不确定那是否是正确的事情？

最佳答案

您遇到的问题是，单击面包屑时currentItem未被更新。

我做了很多更改，主要是“简化”事情。我删除了全局变量，而是将当前项基于active类。检查：http://jsfiddle.net/kQabJ/17/

$("#next-button").on('click', function () {
    var nextItem = $('.active').removeClass('active').next();
    if (!nextItem.length) {
        nextItem = $('.item').first();
    }
    nextItem.addClass('active');
});
$(".breadcrumb-cell .breadcrumb").on('click', function () {
    $('.active').removeClass('active');
    var theID = $(this).data("id");
    $("#" + theID).addClass('active');
});

请注意，我还对您的DOM进行了一些修改，以使用户单击面包屑时更容易选择项目。所做的更改是在您的.item上使用ID而不是数据。这样，您可以执行$("#" + theID)而不是基于数据进行过滤。

由于这些东西可以唯一地标识您自己的.item元素，因此无论如何都要使用id，但是如果不是，则可以随时更改该部分。

关于javascript - 休息.next()吗？我的点击功能两次添加了“.active”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18138569/