时间戳

首页 > 解决方案 > 如何在循环运行时强制 Jquery/JS 替换变量？

javascript - 如何在循环运行时强制 Jquery/JS 替换变量？

问题描述

<html>
<header><script src = "/jquery.js"></script></header>
<div id="cars"></div>

<script>
    $.post({
        url:"/cars.php",
        dataType:"JSON",
        success:function(cars){
                var fromidcount = Object.keys(cars).length;
                for (var i=0;i<=(fromidcount-1);i++){
                    var carname= Object.keys(cars)[i];
                    $("#cars").append("<input type='button' id='"+carname+"'>");
                    $("#"+carname).click(function(){
                        alert("selected "+carname);
                    });
                }
        }
    });
</script>
</html>

我从 PHP 获取 JSON 数组，并使用其中的值通过 Jquery 动态创建 HTML 按钮。到目前为止，它制作了 ids="BMW" 和 "Toyota" 的两个按钮。然后我的脚本应该创建指令，以便当点击 id="BMW" 时，它会提醒“Selected BMW”。当 id="Toyota" 被点击时，它应该会提示“Selected Toyota.

但是，当我单击按钮时，都会提示“已选择丰田”。我检查了开发工具并确认按钮 id 是 BMW 和 Toyota，但每个按钮的事件仍然显示alert("selected "+carname);而不是alert("selected "+"BMW");andalert("selected "+"Toyota");

所以我认为发生的事情是，当单击按钮时，Jquery 才会更新alert("selected "+carname);. 但是到那时，循环已经完成，所以它获取的值是循环的最后一个值，即 Toyota。

您可以看到我在 for 循环中有多个变量 carname 实例。并且 carname 的所有实例都被它们各自的值替换，除了 in 中的那个alert("selected "+carname);。为什么会这样，我该如何解决？

汽车是一个多维数组。[[宝马]，[丰田]]

标签： javascriptjquery

解决方案

您在这里遇到了 JavaScript 的闭包/词法范围规则。您需要另一个函数来关闭carname添加事件处理程序的变量，但是从 ID 中读取汽车名称可能更容易，因为您在那里拥有它：

$("#"+carname).click(function(){
  alert("selected " + this.id);
});

如果您需要将ID用于其他事情，您还可以将汽车名称添加为data-属性。

推荐阅读