使用数组作为动态 JQuery 字符串变量名答案

【问题标题】：Using Array as a Dynamic JQuery String Variable Name使用数组作为动态 JQuery 字符串变量名
【发布时间】：2012-06-24 18:58:32
【问题描述】：

总结：我已将 id 选择标签的名称传递到一个数组中。我想动态分配每个 Select Item 以在更改时显示所选项目的索引。这被发送到输出 div。只有第三个选择项被动态触发。为什么？

<script language="JavaScript" type="text/javascript">

$(document).ready(function(){

var NameOfSelect=new Array("a","b","c");

for (i=0;i<NameOfSelect.length;i++){

var sel=NameOfSelect[i];
$("#"+NameOfSelect[i]).change(function () {
           var str = "";
           $("#"+sel+" option:selected").each(function () {
            str += $(this).index() + " "+$("#"+sel).attr("id");
                  });
          $("#output").text(str);
       })
        .trigger('change');

}
</script>

HTML

<select id="a" >
<option value="0a" >0a</option>
<option value="1a"  >1a</option>
<option value="2a" >2a</option>

</select>


<select id="b" >
<option value="0b"  >0b</option>  
<option value="1b" >1b</option>
<option value="2b" >2b</option>
</select>

<select id="c" >
<option value="0c" >0c</option>
<option value="1c" >1c</option>
<option value="2c" >2c</option>

</select>
<div id=output></div>

输出显示只有“C”在更改时被触发。为什么“a”和“b”没有被类似地动态分配？

【问题讨论】：

标签： jquery arrays variables select dynamic

【解决方案1】：

发生这种情况是因为变量c 在每次迭代时都被重新分配。在 for 循环结束时，所有元素都将有一个适当的事件处理程序，但它们将在其函数体内引用相同的 c 变量。此变量将保存c 的最后一个值，即"c"。

一种解决方案是将c 的值缓存在您分配的每个函数处理程序的闭包中，但在这种情况下，最好在处理程序中简单地使用this 来引用select 元素被change 事件作为目标。

$(document).ready(function(){
    var NameOfSelect = ["a", "b", "c"];

    for (var i=0; i < NameOfSelect.length; i++) {
        $("#"+NameOfSelect[i]).change(function () {
            // this refers to the targeted select element
            var select = this;
            var str = "";
            $("option:selected", this).each(function () {
                // this refers to the selected option
                str += $(this).index() + " " + $(select).attr("id");
            });
            $("#output").text(str);
        }).trigger("change");
    }
});

此外，除非您将selects 用于多项选择，否则每个select 元素应该只有一个option:selected。因此，您可以只使用find 并使用第一个（也是唯一一个）选择的option。

var str = $("option:selected", this).index() + " " + $(this).attr("id");
$("#output").text(str);

【讨论】：

【解决方案2】：

我相信，好的 ol' javascript 关闭问题。您分配给更改事件的函数引用变量 c，该变量在 for 循环的每次迭代中都会更改并以“c”结尾。相反，将 c 传递给函数：

var c= NameOfSelect[i];
(function (n) {
    $("#"+NameOfSelect[i]).change(function () {
        var str = "";
        $("#"+n+" option:selected").each(function () {
            str += $(this).index() + " "+$("#"+n).attr("id");
        });

        $("#output").text(str);
    }).trigger('change')
})(c);

【讨论】：