Question

如果您看一下这个fiddle，它看起来会很好，但是如果你点击下一个然后向下移动2到3次，然后点击“内存”（在顶部导航中）它需要{{1} }回到第一个.active，

然后如果再次单击“下一步”，它将继续转到我们之前离开的前一个元素。

我正在尝试重置它，并根据我们点击顶部导航后的位置继续。

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

.item

Fiddle

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

Answer 1

您遇到的问题是，当您点击痕迹时，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，但如果这不是你不能的话，你总是可以改变那部分。

Answer 2

您只需更新currentItem，请参阅http://jsfiddle.net/kQabJ/13/

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

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

Answer 3

试试这段代码您没有更新导致问题的currentItem。

var items = $('.item'),
    currentItem = items.filter('.active'),
    last = items.last();

$("#next-button").on('click', function () {
    currentItem = items.filter('.active');
    var nextItem = currentItem.next();

    currentItem.next().length > 0 ? currentItem.next().addClass('active')
                                   : items.first().addClass('active');
    currentItem.removeClass('active');
});


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

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

});

<强> Check Fiddle

休息.next（）？我的点击功能两次添加'.active'？

3 个答案: