индекса, кажется, быть изменен во время эк

Question

Я пытаюсь добавить класс и удалить на событии щелчка по ссылке, при щелчке, а затем отменить это, когда другое нажатие на ссылку, у меня есть пример здесь http://jsfiddle.net/bdjohnson/zXyb9/4/

Но через несколько кликов он умирает, я выводю индекс на консоль, и он продолжает меняться, это неправильный способ сделать это?

Любая помощь очень ценится.

Answer 1

Прежде всего, вам не нужен цикл each, чтобы прикрепить обработчик кликов. Просто используйте click на объекте jQuery, который присоединяет обработчик событий к любому элементу коллекции.

Тогда вы можете написать код, как более простой:

$(function() { 
    var previews = $("#pic div"); // Caching selector 
    previews.hide(); 

    $("a.pic_link").click(function(event) { 
     var $this = $(this); 
     if (!$this.hasClass("active")) { 
      previews.slideUp(300).delay(300).eq($this.index()).slideDown(300); 
      $this.addClass("active"); 
      $this.siblings().removeClass("active"); 
     } 
    }); 
});​ 

Обратите внимание, что вы должны использовать complete обратного вызова, вместо того, чтобы использовать delay, как это:

previews.slideUp(300, function() { 
    previews.eq($this.index()).slideDown(300); 
}); 

Answer 2

Я не знаю, почему вам нужно класс active и почему вам нужно удалить событие click, но вот мое решение.

$(document).ready(function() { 
    $("a.pic_link").on("click", function() { 
     var i = $(this).index(); //get the index of the clicked link (I assume that the clicked link length is always the same as the #pic div length) 
     var d = $("#pic div"); //get the divs for the #pic element 
     d.removeClass("active"); //remove the active class on all of the child divs 
     if (d.filter(":visible").length > 0 && d.filter(":visible").index() != i) { //if there is a #pic div visible and it is different from the link that is clicked, then hide it and then show the proper one and add the class 
      d.filter(":visible").slideUp(300, function() { 
       d.eq(i).addClass("active").slideDown(300, function() {}); 
      }); 
     } 
     else { 
      d.eq(i).addClass("active").slideDown(300, function() {});//just add the class and show the proper element 
     } 
    }); 
});​ 

jsFiddle

Кроме того, я хотел бы предложить вам использовать CSS, чтобы изначально скрыть #pic div «S, в противном случае может быть мерцание #pic div» s показывая вверх. Это в jsFiddle.