Javascript 使用jQuery在同级td中隐藏项

我在桌子上有一些单选按钮。当我选择某些单选按钮时，我想显示/隐藏同级td中的某些div

以下是我的代码：

$("input[type='radio'].map").change(function () {
    $(this).closest('tr').find('.agency-mapping').show();
    $(this).closest('tr').find('.agency-new').hide();
});

$("input[type='radio'].new").change(function () {
    $(this).closest('tr').find('.agency-mapping').hide();
    $(this).closest('tr').find('.agency-new').show();
 });



...
<tr>
    <td></td>
    <td>
        <div>
            <input type="radio" class="map" value="map" checked="checked" />
            <input type="radio" class="new" value="new" />
        </div>
    </td>
    <td>
        <div class="agency-mapping">
        </div>
        <div class="agency-new" style="display:none">
        </div>
    </td>
</tr>
...

$（“输入[type='radio'].map”）.change（函数（）{
$（this）.closest（'tr'）.find（'agency mapping'）.show（）；
$（this）.closest（'tr'）.find（'.agency new'）.hide（）；
});
$（“输入[type='radio'].new”）.change（函数（）{
$（this）.closest（'tr'）.find（'agency mapping'）.hide（）；
$（this）.closest（'tr'）.find（'.agency new'）.show（）；
});
...
...

如果我有两排的话，这个很好用。但是我有数百行，性能非常差。我点击一个单选按钮，显示/隐藏div需要5-10秒

有更好的方法吗？

您可以使用

.on（）

将事件仅附加到父元素上，如

或

，而不是将其附加到表上的每个单选按钮上。像这样：

$('tbody').on('click', 'input.map', function(){
    ...
});

阅读“直接和委托事件”

---

. 希望这会有所帮助。

尝试使用

儿童
而不是
查找
看看这是否会带来任何改进。您可能需要考虑从JS动态创建整个表，记住数组中每个创建的行/单元格/无线电，以便快速访问（没有任何jQuery选择器和类似的东西）。这是真正的标记，还是使用按钮的任何名称属性？@ Dr.Mulle——我确实有单选按钮的名称属性，但我不是在点击按钮时引用它们。你认为这可能是问题之一吗？