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

can not pass array value to a click function

本文关键字：单击 函数 值传 数组      更新时间：2023-09-26

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

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

这里是问题我不能传递数组值jquery点击对象。我的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">

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

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

使用函数打破引用有很多种方式，但由于您使用的是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);
}

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

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); 
}
相关文章：