0

テーブルにいくつかのラジオボタンがあります。特定のラジオ ボタンを選択したときに、兄弟 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 秒かかります。

これを行うより良い方法はありますか？

4

1 に答える 1

0

テーブルのすべてのラジオボタンにイベントを付ける代わりに、.on()親要素にのみイベントをアタッチするために使用できます。このような：<tbody><table>

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

ここで「直接および委任されたイベント」をお読みください 。それが役立つことを願っています..

于 2013-05-24T01:24:16.160 に答える