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

Question

我有一个非常简单的使用jQuery缓存和委托的jsFiddle。我如何使处理程序具有足够的动态性，当用户单击第一组复选框时，它只会突出显示其下面的行，并且当用户选择第二组复选框时，它应该选择第二个复选框下方的行。

我可以在组复选框下有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级别来找出哪个行或表被点击了。