基于事件在循环中隐藏元素[重复]

Question

在我的表格中，我有五个这样的广播组：

<label class="radio-inline"><input type="radio" name="persontype1" value="fo" checked="checked">FO</label>
<label class="radio-inline"><input type="radio" name="persontype1" value="po">PO</label>

然后我有一个循环来隐藏/显示其他元素，基于这些单选按钮的更改事件：

for (i = 1; i <= 5; i++) {
    $("input[type=radio][name=persontype" + i + "]").change(function() {
        if (this.value == 'fo') {
            $("#person-name" + i).removeClass('hidden');
        }
        else if (this.value == 'po') {
            $("#person-name" + i).addClass('hidden');
        }
    });
}

问题是它不能以这种方式工作。当我在选择器中使用绝对 ID 值名称时，它可以工作：

$("#person-name1").addClass('hidden');

我尝试使用一些全局变量，但它也不起作用。有没有办法将变量 i 传递给该函数？

提前致谢，JiKra

Answer 1

将代码包装在一个封闭的 IIFE（立即调用的函数表达式）中：

for (i = 1; i <= 5; i++) {
    (function(i){
        $("input[type=radio][name=persontype" + i + "]").change(function() {
            if (this.value == 'fo') {
                $("#person-name" + i).removeClass('hidden');
            }
            else if (this.value == 'po') {
                $("#person-name" + i).addClass('hidden');
            }
        });
    })(i);
}

这将为内部i（函数的参数）提供函数范围。

虽然使用单个事件处理程序并具有确定哪个是哪个的属性会更有意义:)

 // Match on starts-with "persontype" using ^=
 $("input[type=radio][name^=persontype]").change(function() {
     var target = $(this).data('target');
     // Do something to the target
 });