javascript - 如何获取从数组中调用的按钮的当前值以显示另一个数组中的内容？

Question

试图从数组中获取当前按钮的数值，以便我可以根据 bNames 数组编号显示来自另一个数组的图像和描述。

我似乎没有工作。试图根据 bNames 的数值显示 images[i] 和 descriptions[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]);
});
}

非常感谢任何帮助，谢谢！

Answer 1

您遇到的问题在此问题中进行了描述。另请参阅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]);
    });
});

Answer 2

注意：永远不要在循环中定义函数......

您在 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]);
});