Question

本网站和其他地方已经存在几个相关问题，但没有一个答案似乎适用于我的情况。我在HTML中有一堆单选按钮。

<input type="radio" name="b1" value="aa"> aa<br>
<input type="radio" name="b1" value="ab"> ab<br>
<input type="radio" name="b1" value="ac"> ac<br>

<input type="radio" name="b2" value="ba"> ba<br>
<input type="radio" name="b2" value="bb"> bb<br>
<input type="radio" name="b2" value="bc"> bc<br>

<script type="text/javascript">
var PK = {    
   modes: ["b1", "b2"],

   init: function() {        
      // attach actions to radio buttons
      for (var key in this.modes) {
          var mode = this.modes[key];
          $("input[name='" + mode + "']").bind(
               "change", 
               function() { 
                 PK[mode]($("input[name='" + mode + "']:checked").val()); 
               } 
          );
       }
    },

    b1: function(val) { .. do something .. },

    b2: function(val) { .. do something else .. },
};

$(document).ready(function() {
   PK.init();
});
</script>

以上根本不起作用。我尝试过.live而不是.bind，即使这样也无法正常工作。实际上，它们都将动作绑定到模式中的最后一个条目，在上面的“b2”中。也就是说，无论我改变b1或b2按钮中的值，都会触发函数PK.b2（）。如果我反转模式条目，最后一个采用该值。我怎样才能成功完成他？

Answer 1

JavaScript闭包使用父函数范围，因此PK[mode]将始终引用最后一个mode。你可以做这样的事情来避免它：

$("input[name=" + mode + "]").bind(
    "change", 
    function(mode) { 
        return function() {
             PK[mode]($("input[name='" + mode + "']:checked").val());
        };
    }(mode)
);

有关更多详细信息，请参阅示例臭名昭着的循环问题部分of this article。

Answer 2

在代码的for循环中，每次为不同的模式设置变量模式。但是它只会保留循环的最后一个值。所以你需要对bind中的函数进行一些更改。

$("input[name=" + mode + "]").bind(
    "change", 
    function(e) {
        PK[$(this).attr('name')]($(this).val()); 
    } 
);

现在我们使用jquery来确定我们正在使用的项目的名称，而不是依赖于只有循环中最后一位数据的变量。

Answer 3

我看到的有两个问题。

首先，作为lrudor pointed out，闭包中的mode是迭代的最后一种模式。

其次，使用[name=whatever]代替[name="whatever"]。

Answer 4

如果这是你想做的事，我理解你是否正确？

init: function() {
    // attach actions to radio buttons
    for (var key in this.modes) {
        var mode = this.modes[key];
        $("input[name='" + mode + "']")
            .bind("change", function(e) {
                var radio = e.srcElement;
                PK[radio.name](radio.value);
            })
            .bind("click", function() {
                // Loose focus of the radio button once clicked,
                // so the change-event fires
                this.blur();
            });
    }
},

jQuery：动态绑定事件到dom对象

4 个答案: