根据事件隐藏循环中的元素

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>

然后我有一个循环到 hide/show 其他元素，基于这些单选按钮的更改事件：

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
 });

根据事件隐藏循环中的元素

Hiding element in loop based on event

javascript

jquery

jquery-selectors