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层次结构找出，点击了哪一行或哪一行。

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

1 个答案: