Question

只是想知道，当我使用.on时，我是否可以找到被点击的td的类名（＆＃39;点击＆＃39;＆＃39; tr＆＃39 ; function（）？

以下是我的代码：

    <table id="testing">
      <tr id="2"> 
           <td class="test1"></td>
          <td class="test2"></td>
          <td class="test3"></td>
          <td class="test4"></td>
      </tr>
</table>

JQuery的：

    $('#testing).on('click', 'tr.2', function () {

 });

无论如何，当我点击第一个td时，我可以找到班级名称（test1）？

Answer 1

如果您需要处理表格单元格的点击，那么为什么不将它们连接起来......？但请确保您的选择器编写得很好而没有任何拼写错误，因为在您的问题中tr.2将不会选择任何内容，因为没有表行具有＆＃34; 2＆＃34;类。在你的jquery

中还有一个未闭合的单引号文字/字符串

＆＃13;

$('#testing').on('click', 'tr td', function () {
        console.log($(this).attr("class"));
     });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testing">
      <tr id="2"> 
           <td class="test1">Test 1</td>
          <td class="test2">Test 2</td>
          <td class="test3">Test 3</td>
          <td class="test4">Test 4</td>
      </tr>
</table>

＆＃13;

Answer 2

请注意，在我添加的代码段中，我在td元素的开始/结束标记中添加了文字。（为什么？因为您需要点击某些内容才能验证您的jQuery代码是否正常工作）。除此之外，我还没有修改你的原始HTML。

为了解释我的jQuery代码，我首先要注意的是，就像你一样，我委托了click个事件。但是，与您不同的是，我将td元素嵌套在table元素中（通过$('#testing')选择器）而不是tr.2，正如您所使用的那样。

在回调（匿名）功能中，我传递给jQuery的$.on()方法，我使用context（即，JavaScript的this关键字或jQuery的等价物，$(this)）来捕获用户点击的特定td。我们可以将jQuery .attr()方法链接到此选择器，传入字符串class以检索所需的类名。为简单起见，我将状态中的值保存为$tableCellClass变量（使用ES6＆＃39; s let声明 - 出于这些目的，可以将其视为{{{ 1}}）。将其记录到var应该会显示您正在寻找的内容。

希望这有帮助！

＆＃13;

console

＆＃13;

$('#testing').on('click', 'td', function(evt) {
  let $tableCellClass = $(this).attr('class');
  console.log(`Cell Class(es):\t${$tableCellClass}`);
});

＆＃13;

Answer 3

单击元素时，事件对象包含target属性。

$('#testing').on('click', 'tr#2', function (e) {
   // use closest() in case click on element inside `td`
   var $cellClicked = $(e.target).closest('td')
   if($cellClicked.index() === 0){
      console.log('clicked on first , class =  ',   $cellClicked.attr('class'))
   }else{
      console.log('Not first cell');
   }

});

听td而不是tr

上的活动可能更简单

任何方法都可以找到td被点击的类名。（＆＃39;点击＆＃39;＆＃39; tr＆＃39; function（）？

3 个答案: