0

如果您看一下这个小提琴，它看起来会很好，但是如果您单击下一步并向下移动 2 到 3 次，然后单击“内存”（在顶部导航中），它会.active回到第一个.item，

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

我正在尝试重置它并在单击顶部导航后根据我们去的地方继续。

有缺陷的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');

});

 });

小提琴

我在 Google 上搜索“如何重置 .next() jquery”但找不到任何东西，不确定这是否是正确的做法？

4

3 回答 3

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，以便在用户单击面包屑时更容易选择项目。该更改是在您的 s 上使用 ID.item而不是数据。这样您就可以做$("#" + theID)而不是根据数据进行过滤。

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

于 2013-08-09T00:55:20.640 回答
1

您只需要更新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');
    });
于 2013-08-09T01:02:39.380 回答
1

试试这个代码你没有更新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');

});

检查小提琴

于 2013-08-09T01:03:12.313 回答