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

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继承层来确定单击了哪行或哪张表。