javascript - 私のjQueryでindexOfが私の配列からキーを見つけられないのはなぜですか?

Question

私はそれを機能させようとしてきましたが、何も役に立たないようです。

したがって、写真配列に2つの画像があります。私がやりたいことは、前の画像をクリックすると次の画像が表示されることです。indexOf毎回-1を返すので、問題があると確信しています。

行を置き換えると:

pictures[listIndex+1].show("drop", {direction: "up"}, 1000);<---動作しません。

行で：

pictures[1].show("drop", {direction: "up"}, 1000);<---動作しますが、あまり役に立ちません。

私の問題が何であるかを理解していただければ幸いです。私の下手な英語で申し訳ありません。よろしくお願いします。

$(document).ready(function(){
    var pictures = [$("#link"), $("#italy1")];
    pictures[1].hide();
    $("#link").click(function(){
        var listIndex = pictures.indexOf($(this));
        pictures[listIndex+1].show("drop", {direction: "up"}, 1000);
    });
    $("#italy1").click(function(){
        $(this).hide("drop", {direction: "up"}, 1000);
});
});

Answer 1

これは、要素を jQuery オブジェクトでラップしているためです。2 つの jQuery オブジェクトに同じ要素が含まれていても、それらは 2 つの別個のオブジェクトであるため、indexOfメソッドは一方を探しても他方を見つけることができません。

要素自体を配列に入れます。

var pictures = [$("#link").get(0), $("#italy1").get(0)];

これで、要素参照を使用して配列内の要素を見つけることができます。$.inArrayメソッドを持たないブラウザーでも機能するため、メソッドを使用しますArray.indexOf。

var listIndex = $.inArray(this, pictures);

もちろん、配列から要素を取得するときは、それを jQuery オブジェクトでラップして、jQuery メソッドを使用する必要があります。

$(pictures[listIndex+1]).show("drop", {direction: "up"}, 1000);

Answer 2

Guffa のサポートでは、このFIDDLEのようなものです。

$(document).ready(function(){
    var pictures = [$("#link").get(0), $("#italy1").get(0)];

    $(pictures[1]).hide();

    $("#link").on('click', function(){
        var listIndex = $.inArray(this, pictures);
        $(pictures[listIndex+1]).show("drop", {direction: "up"}, 1000);
    });

    $("#italy1").on('click', function(){
        $(this).hide("drop", {direction: "up"}, 1000);
    });
});

Answer 3

次を選択したい場合は$("#link")、いつでも使用できます$(this).next("#link")。