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

尝试获取从数组调用的当前按钮的数值，以便根据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]);
});
}

var bNames=[“按钮01”、“按钮02”、“按钮03]；
var images=[“image01.png”、“image02.png”、“image03.png”]；
变量描述=[“和一”、“和二”、“和三”]；
对于（var i=0；i，您遇到的问题在本文中进行了描述。有关更多信息，请参见。本质上，您总是使用
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);
}

for（var i=0；i注意：永远不要在循环中定义函数…

你身处HTML5世界，这是一场革命……使用数据属性……
这是解决办法

HTML:

按钮01
按钮02
按钮03

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

var images=[“image01.png”、“image02.png”、“image03.png”]；
变量描述=[“和一”、“和二”、“和三”]；
$（“.button”）。单击（函数（）{
var i=$（此）.data（“索引”）；
$（“#image”）.html（“”）；
$（“#desc”）.html（说明[i]）；
});
使用类会更好。
  <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>

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