javascript - jQuery Mobile ループが機能しない

Question

これが問題のjsfiddleです。

「トカゲ」をクリックすると、どちらの場合もトカゲの写真が表示されます。

"+ entries[index] +"をそれぞれ 1 と 6に置き換えると、すべて正常に動作します。ループで行うと、もう機能しません。

理由がわかりません。

Answer 1

あなたのエラーは、イベントentries[i]内に値を持つことを期待していることです。click

$("#"+ entries[1] +"-choice-C").bind("click", function() {
    $("#"+ entries[1] +"-lizard").show();
});

値 ifは 2 (配列の長さと同じ) になるため、entries[i]クリックしたときの の値はundefinedになります。i

必要なのは、の値を保持するためのクロージャーiです。以下に例を示します。

var items = ["a","b", "c"];
var displayItem = function (i) {
    window.setTimeout(function () {
        alert(items[i]);
    }, 100);
}

for (var i = 0; i < items.length; i++) {
    displayItem(i);
}

問題を解決するコードについては、 @ Ian がコメントしたフィードルにアクセスしてください。