javascript - 使用 jQuery 隐藏同级 td 中的项目

Question

我在表格中有一些单选按钮。当我选择某些单选按钮时，我想在同级 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>
...

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

有一个更好的方法吗？

Answer 1

您可以使用.on()仅将事件附加到父元素上，<tbody>或者将其附加到<table>表格上的每个单选按钮上。像这样：

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

在此处阅读“直接和委托事件” 。希望有帮助..