Question

我正在尝试将变量连接到一个JQuery选择器（我理解它相当简单），但我遇到了一些有趣的行为。我的代码应该沿y轴取消选中某些无线电选择器。

for(var i = 1; i < 5; i++) {
    $("input[value='"+1+"']").each(function() {                     //<--
        $(this).on('change', function() {
            var that = this;
            $("input[value='"+1+"']").each(function() {             //<--
                if($(this).attr('name') != $(that).attr('name')) {
                    $(this).prop('checked', false);
                }
            });
        });
    });
}

现在，代码按原样运行（仅选择值为'1'的输入），并使用引号中包含的'1'。但是，一旦我传入i或i.toString()，代码就无效了。理想情况下，我希望能够通过i来激活我的所有inputs。这有可能吗？我正在使用http://code.jquery.com/jquery-1.10.2.min.js中的JQuery。

HTML

<form method="POST" action="votes.php">
    <div style="border:black solid 1px;border-radius:5px;">
        <label>One</label>
        <input type="radio" name="one" value="1">
        <input type="radio" name="one" value="2">
        <input type="radio" name="one" value="3">
        <input type="radio" name="one" value="4">
    </div>
    <div style="border:black solid 1px;border-radius:5px;">
        <label>Two</label>
        <input type="radio" name="two" value="1">
        <input type="radio" name="two" value="2">
        <input type="radio" name="two" value="3">
        <input type="radio" name="two" value="4">
    </div>
    <div style="border:black solid 1px;border-radius:5px;">
        <label>Three</label>
        <input type="radio" name="three" value="1">
        <input type="radio" name="three" value="2">
        <input type="radio" name="three" value="3">
        <input type="radio" name="three" value="4">
    </div>
    <div style="border:black solid 1px;border-radius:5px;">
        <label>Four</label>
        <input type="radio" name="four" value="1">
        <input type="radio" name="four" value="2">
        <input type="radio" name="four" value="3">
        <input type="radio" name="four" value="4">
    </div>
</form>

Answer 1

这是JavaScript中的经典闭包问题。在您的代码中，将1替换为i（事件处理程序中的第二个i）将无效，因为这些事件处理程序会保持与 {{1的实际链接变量本身，而不是代码运行时i保持的值

解决方案很简单：通过将i作为参数传递给函数来打破闭包：

Answer 2

我已使用1更改i，现在您的代码就像

for(var i = 1; i < 5; i++) {
    $("input[value='"+i+"']").each(function() {                     //<--
        $(this).on('change', function() {
            var that = this;
            $("input[value='"+i+"']").each(function() {             //<--
                if($(this).attr('name') != $(that).attr('name')) {
                    $(this).prop('checked', false);
                }
            });
        });
    });
}

在change事件中迭代html元素是没有用的，因为它只有一个元素。此外，您只迭代一个单独的组，而不是像

那样迭代该组

var names = ["one", "two", "three", "four"];
for (var i=0; i< names.length; i++) {
  $("input[name='"+names[i]+"']").each(function() { 
.............
.............

在JQuery选择器中连接字符串

2 个答案: