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

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 功能的按钮。我需要一个提示。

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/

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