JavaScript jQuery Mobile 在 for 循环中创建按钮

javascript jquery mobile create buttons in for-loop

本文关键字：创建 按钮 循环 for jQuery Mobile JavaScript      更新时间：2023-09-26
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 的按钮。我需要一个提示。

我会将按钮的初始添加和"单击"操作分开。

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 编写。另请注意，我摆脱了数组项周围的 $（）。最后，如果您不想转义字符串中的引号，则可以使用单个引号。

查看 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)
}

使用闭包，例如

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

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

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

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

相关文章：