如何识别在委托代码中触发 jQuery click 事件的对象

Question

我有一个非常简单的jsFiddle，它使用 jQuery 缓存和委托。我怎样才能使处理程序足够动态，当用户单击第一个组复选框时，它只突出显示它下面的行，当用户选择第二个组复选框时，它应该选择第二个复选框下面的行。

我可以在组复选框下有 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;
}

Answer 1

你试过evt.target吗？那应该是触发点击的 HTML 元素。

试试这个示例jsFiddle 以获得插图。由于您知道它是哪个单元格，因此您可以向上查看 DOM 层次结构以确定点击了哪一行或哪张表。