Rest .next()? My click function adding '.active' twice?

Question

If you take a look at this fiddle it will seem fine, but if you click next and move down 2 to 3 times, and then click "memory" (in top nav) it takes .active back to the first .item,

then if you click 'NEXT' again it continues to go to the next element from the prior one we left off of.

I am trying to reset it and continue based on where we go after clicking on the top nav.

Faulty jQuery:* Two click functions both adding active*

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

I Googled "how to reset .next() jquery" but couldn't find anything, not sure if that's even the right thing to do?

Answer 1

The problem you had was that currentItem didn't get updated when you clicked on a breadcrumb.

I made a lot of changes, mostly "streamlining" things. I removed your global variables and based the current item on the active class instead. Check: 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');
});

Note that I also modified your DOM a bit to make it easier to select an item when a user clicks a breadcrumb. That change is using an ID on your .items instead of data. This way you can do $("#" + theID) rather than filtering based on data.

Since these things are uniquely identifying your .item elements themselves - it makes since to use an id anyway, but if this is not what you not you can always change that part back.

Answer 2

You just need to update currentItem, see 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

Try this code You were not updating the currentItem, which was causing the problem.

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