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>

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

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

基于事件隐藏循环中的元素

1 个答案: