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">

Yeap的主要问题是将多维数组值传递给函数：（

Answer 1

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

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

}

Answer 2

这个问题与“多维数组”无关。您在指定的点击值中使用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);
}

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

2 个答案: