Question

for (var i = 0; i < 10; i++) {
    array.push($("<a href=\"#\" data-role=\"button\" data-inline=\"true\">" + i + "</a>"));
    $("#row").append(array[i]);
    array[i].click(function () {
        changeval(i);
        console.log(i);
    });
}

我的问题是函数changeval（i）总是与i的值10相同。我尝试在这个for循环中使用onclick-function创建按钮。我需要一个提示。

Answer 1

我会将按钮的初始添加和“点击”操作分开。

for (var i = 0; i < 10; i++) {
    array
            .push($("<a href=\"#\" data-role=\"button\" data-inline=\"true\">"
                    + i + "</a>"));
    $("#row").append(array[i]);
    array[i].click(function() {
        changeval(i);
        console.log(i);
    });
}

将分为：

for (var i = 0; i < 10; i++) {
    array.push("<a href=\"#\" data-role=\"button\" data-inline=\"true\">"
                    + i + "</a>");
    $("#row").append(array[i]);
};

$('#row').on('click', 'a', function() { 
    changeVal($(this).text());
    console.log($(this).text());
};

另请注意，javascript中的变量和函数应该用CamelCaseForBetterReadability编写。另请注意，我摆脱了数组项周围的$（）。最后，如果您不想转义字符串中的引号，则可以使用单引号。

Answer 2

查看JS闭包，i的值设置为循环的最后一次迭代。将i作为参数包含在自执行函数中：

for (var i = 0; i < 10; i++) {
    (function(i) {
        array
            .push($("<a href=\"#\" data-role=\"button\" data-inline=\"true\">"
                    + i + "</a>"));
        $("#row").append(array[i]);
        array[i].click(function() {
            changeval(i);
            console.log(i);
        });
    })(i)
}

Answer 3

使用闭包，例如

for (var i = 0; i < 10; i++) {
    (function(i) {
        array[i].click(function() { . . . } );
    )(i);
}

如果您正在使用jQuery（如果您正在使用.click :)，则可以使用

http://api.jquery.com/jQuery.each/

循环遍历元素并实现相同的功能。

javascript jquery mobile在for循环中创建按钮

3 个答案: