1

jQueryキャッシングとデリゲートを使用する非常に単純なjsFiddleがあります。ユーザーが最初のグループのチェックボックスをクリックすると、その下の行のみが強調表示され、ユーザーが2番目のグループのチェックボックスを選択すると、2番目のチェックボックスの下の行が選択されるように、ハンドラーを動的にするにはどうすればよいですか。

グループチェックボックスの下にn個のグループとn個の行を含めることができます。パフォーマンスのために、すべてをキャッシュしようとしていますが、ハンドラーで、指定されたクラスを使用してグループを識別するチェックボックスに基づいて、目的のグループ行を選択できるようにしたいと考えています。また、ユーザーがいつデータセルをクリックしたかを特定したいと考えています。

オブジェクトを識別するためにさまざまなオプションを試しました.obj.typeは、私がタイプを与えると思っていたものを返さないと思います。どんな助けでも大歓迎です。

コード：

var elements = $(".data");

$("table").delegate("td", "click", function(evt){
    var obj = $(this);

    switch (obj.type) {
        case: "checkbox":
            //select all elements under this group
            elements.addClass('blue');
            break;
        case: "td":
            //I know this is not the right case, not sure how to trap a cell click
            //apply class 'red'
            break;
        default:
            elements.addClass('green');
            break;
    }    
});

HTML と CSS のサポート

<table>
  <tbody>
    <tr>
        <td>
            <input type="checkbox" id="chkFirst" />
        </td>
    </tr>
    <tr class="data">
        <td class="first">
            A
        </td>
    </tr>
    <tr class="data">
        <td class="first">
            B
        </td>
    </tr>
    <tr class="data">
        <td class="first">
            C
        </td>
    </tr>
     <tr class="data">
        <td>
            <input type="checkbox" id="chkSecond" />
        </td>
    </tr>
    <tr class="data">
        <td class="second">
            Aa
        </td>
    </tr>
        <tr class="data">
        <td class="second">
            Bb
        </td>
    </tr>
  </tbody>
</table>

.blue {
    color: blue;
}
.red {
    color: red;
}
.green {
    color: green;
}
4

1 に答える 1

0

試しましたevt.targetか？これは、クリックをトリガーした HTML 要素である必要があります。

例として、このサンプルjsFiddleを試してください。どのセルかがわかるので、DOM 階層を調べて、どの行またはテーブルがクリックされたかを調べることができます。

于 2013-02-19T04:52:42.083 に答える