jquery - eq 中にインデックスが変更されたようです

Question

クラスを追加し、リンクがクリックされたときにリンクのクリックイベントを削除し、別のリンクがクリックされたときにこれを元に戻そうとしています。ここに例がありますhttp://jsfiddle.net/bdjohnson/zXyb9/4/

しかし、数回クリックすると終了し、インデックスをコンソールに出力し、変更し続けました。これは間違った方法ですか?

どんな助けでも大歓迎です。

Answer 1

activeクラスが必要な理由とクリックイベントを削除する必要がある理由はわかりませんが、これが私の解決策です。

$(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
        }
    });
});​

jsフィドル

さらに、最初は CSS を使用して を非表示にすることをお勧めし#pic divます#pic div。jsFiddle にあります。

Answer 2

まずeach、クリックハンドラーをアタッチするためのループは必要ありません。jQueryオブジェクトで使用するだけclickで、コレクションの任意の要素にイベントハンドラーがアタッチされます。

次に、コードをもっと簡単に書くことができます。

$(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);
});