Question

我有以下代码可以使用

var btns = $('.gotobtn');
$('#'+btns.get(0).id).click(function() {
    document.querySelector('#navigator').pushPage('directions.html', myInfo[0]); });

$('#'+btns.get(1).id).click(function() {
    document.querySelector('#navigator').pushPage('directions.html', myInfo[1]); });

$('#'+btns.get(2).id).click(function() {
    document.querySelector('#navigator').pushPage('directions.html', myInfo[2]); });

// this works. I click on button 0 and get myInfo[0], 
// on 1 and get myInfo[1], on 2 and get myInfo[2]

但是用循环替换它不能正常工作。相反，我总是得到最后一个元素：myIfno [2]对于我按下的任何按钮。

var btns = $('.gotobtn');
var i = 0;
for (i = 0; i<3; i++){
    var btnid = "#" + btns.get(i).id;
    $(btnid).click(function() {                        
        document.querySelector('#navigator').pushPage('directions.html', myInfo[i]); });
    }
    // this does set the buttons on-click but when I click on them, 
    // all get the latest iteration, in this example myInfo[2]

这是为什么？如何在不手动定义每个按钮的情况下解决这个问题？我想看看如何在jquery中做到这一点。

Answer 1

因为： JavaScript没有块范围。使用块引入的变量的范围限定为包含函数或脚本

替换：

$(btnid).click(function() {                        
        document.querySelector('#navigator').pushPage('directions.html', myInfo[i]); 
});

使用：

$(btnid).click(customFunction(i));

并在循环外声明此函数：

function customFunction(i) {                        
     document.querySelector('#navigator').pushPage('directions.html', myInfo[i]); 
 }

Answer 2

你的

$(btnid).click(function() {                        
        document.querySelector('#navigator').pushPage('directions.html', myInfo[i]); });

必须在你的for循环之外。

Answer 3

@ibrahim mahrir是对的。它是由46039325中描述的相同现象引起的，尽管这个问题特定于JQuery绑定，并且可能对某些人有用。（我在网上的几个地方看到了未回答的问题）

这是因为我绑定到i，同时i已更改为最后一次迭代（在此示例中为2）。我需要在迭代时将绑定到 i的值。

如果我定义绑定到函数的参数，这将发生（由于javascript中的怪癖）。参数是＆＃34;动态创建＆＃34;每次和该参数的值（在该迭代期间）都将被绑定。

所以当我最后点击第二个按钮（id：1，第一个是id：0）时，它会正确地调用值为1的方法。

以下是修补程序在jQuery中的外观示例：

$(function(){ // document ready
    function btnaction(i){
        var btns = $('.gotobtn');
        $('#'+btns.get(i).id).click(function() {
            document.querySelector('#navigator').pushPage('directions.html', gotoInfo[i]);
        });
    }

我在循环中调用它

for (i = 0; i<6; i++)
    btnaction(i);

好的结果很好......

为什么循环设置所有jquery onclick到最后一次迭代

3 个答案: