无法将数组值传递给单击函数

Question

我计划在页面上显示一些图像，当用户按下向上按钮时，将显示一些相关的新图像。我通过更改已有图像 html 标签的“src”属性来实现这一点。

我有像 [["a","b"],["c","d"]] 这样的 json 数据，它给出了像 a.jpg、b.jpeg 这样的图像名称 等。

这是我无法将数组值传递给 jquery click 对象的问题。我的javascript功能如下：

var a; // a global variable holding the json array [["a","b"],["c","d"]]

function rileri(){ //img next
var ix=parseInt($("#up").attr('rel'));
ix=(ix+1)%a.length; 
for(var i=0;i<2;i+=1){ 
   $("#k"+i).attr("src","img/m/t/"+a[ix][i]+".jpg"); 
   $("#k"+i).click(function() { rgetir(a[ix][i]);}); //problem is here!!
 }
$("#up").attr('rel',ix); // i keep index data of appearing img on "rel"
}

function rgetir(n){ //img down ajax
$("#brc").load("data/rgetir.php", {'name':n});
}

我想知道如何绑定点击事件以及是否有更好的解决方案？

html 就是这样（开始时没有“src”，可以吗？）：

<img id="k0"/><img id="k1"/>
<input id="up" rel="0" type="button" onclick="rileri()"  value="Next">

是的，主要问题是将多维数组值传递给函数:(

Answer 1

这个问题与“多维数组”无关。这是因为您在分配的点击值中使用了i，并且i随着循环的每次迭代而变化。每个分配的点击值都包含对 i 的引用，因此当 rileri 完成时，每个点击值都指向相同的值。您需要中断引用，通常通过将 i 传递给函数并在其中绑定点击来完成。

使用函数来中断引用的方式有很多种，但由于您使用的是 jQuery 并迭代数组，因此我们将使用 $.each：（

以下内容未经测试，但应作为例子）

function rileri(){
  var ix=parseInt($("#up").attr('rel'),10);
  ix=(ix+1)%a.length; 

  $.each(a[ix], function (i) {
    var img_name = this;

    $("#k"+i)
      .attr("src","img/m/t/"+img_name+".jpg")
      .click(function () {
        rgetir(img_name);
      });

      if (i >= 2)
      {
        return false;
      }
  });

  $("#up").attr('rel',ix);
}

Answer 2

这是一个简单的小提琴，显示您的问题

http://jsfiddle.net/MHJx6/

问题是您的 ix和 i 变量是闭包，因此在事件运行时它们具有错误的值，如本示例中所示。

---

我尝试编写一些代码来完成我认为您在下面尝试做的事情。如果我知道你想做什么（用例），那就更容易了。也许这就是你想要的？

var a; // a global variable holding the json array [["a","b"],["c","d"]]

function rileri(){ //img next
   $("#k0").click(function() { handleClick(0); });
   $("#k1").click(function() { handleClick(1); });
}


function handleClick(index) {
  var ix=parseInt($("#up").attr('rel'));
  ix=(ix+1)%a.length; 

  $("#k"+index).attr("src","img/m/t/"+a[ix][index]+".jpg"); 

  $("#up").attr('rel',ix); 

}