0

bNames 配列番号に基づいて別の配列から画像と説明を表示できるように、配列から呼び出されている現在のボタンの数値を取得しようとしています。

うまくいかないようです。bNames の数値に基づいて表示する画像 [i] と説明 [i] を取得しようとしています。

var bNames = ["#button01","#button02","#button03"];
var images = ["image01.png","image02.png","image03.png"];
var descriptions = ["And a one","And a two", "And a three"];


for (var i=0; i<bNames.length; i++){
$(bNames[i]).click(function(e) { 
    $("#image").html("<img src=images/" + images[i] + " />");
    $("#desc").html(descriptions[i]);
});
}

どんな助けでも大歓迎です、ありがとう！

4

2 に答える 2

0

あなたが抱えている問題は、この質問に記載されています。詳細については、 JavaScript ループ クロージャも参照してください。基本的に、 によって保持されている最後の値を常に使用していますi。

このような何かがうまくいくはずです：

for (var i=0; i<bNames.length; i++) {
    (function(index) {
        $(bNames[index]).click(function(e) { 
            $("#image").html("<img src=images/" + images[index] + " />");
            $("#desc").html(descriptions[index]);
        });
    })(i);
}

また、その質問から、代わりにこれを行うことができます：

$.each(bNames, function(i, item) {
    $(item).click(function(e) {
        $("#image").html("<img src=images/" + images[i] + " />");
        $("#desc").html(descriptions[i]);
    });
});
于 2013-01-09T06:25:03.773 に答える
0

注: ループ内で関数を定義しないでください...

あなたはHTML5の革命の世界にいます... データ属性を使用してください... 解決策は次のとおりです...

HTML:

  <button class="button" data-index="0">Button01</button>
  <button class="button" data-index="1">Button02</button>
  <button class="button" data-index="2">Button03</button>
  <div id="image"></div>
  <div id="desc"></div>

Javascript:

var images = ["image01.png","image02.png","image03.png"];
var descriptions = ["And a one","And a two", "And a three"];


$(".button").click(function(){
  var i = $(this).data("index");
  $("#image").html("<img src=images/" + images[i] + " />");
  $("#desc").html(descriptions[i]);
});
于 2013-01-09T06:29:52.037 に答える