TDは.onにクリックされていることクラス名を見つけるために、任意の方法（（）「TR」関数を「クリック」？

Question

ただ不思議私がされているTDのクラス名を見つけるためにのために、それが可能になります私はとにかく

$('#testing).on('click', 'tr.2', 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：？私は.on使用していたときに私が持つ符号である（ 'TR' 関数を 'クリック'（）

次をクリック1番目のtdをクリックするとクラス名（test1）を見つけることができますか？

Answer 1

あなたがテーブルセルのクリックを処理するために必要がある場合は、なぜそれらをフックアップしませんか...？ しかし、あなたの質問でtr.2は「2」クラスを持つ表の行がないので何も選択しないので、セレクタがタイプミスなく書かれていることを確認してください。あなたのjqueryの中に閉じられていない単一引用リテラル/文字列のスニペットに私が含まれていることを

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

<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>

Answer 2

注意もあります、私はtd要素の開放/終了タグ内のテキストを追加しました。 （なぜなら、jQueryコードが動作していることを確認するには、クリックするだけのものが必要なためです）。それ以外に、オリジナルのHTMLを変更していません。

私のjQueryのコードを説明するために、私はあなたのように、私はclickイベント（複数可）を委譲するよ、ということに注目することから始めましょう。あなたが使用されるようにしかし、あなたと違って私は、むしろtr.2より（$('#testing')セレクタ経由）table要素内にネストtd要素をターゲットにしています。

私はjQueryの$.on()メソッドに渡しているコールバック（匿名）関数内で、私は、ユーザー、その上に、その特定tdをキャプチャするcontext（つまり、JavaScriptののthisキーワード、またはjQueryの同等、$(this)）を使用していますクリックこのセレクタにjQuery .attr()メソッドをチェーンして、文字列classを渡して、目的のクラス名を取得できます。わかりやすくするために、私は$tableCellClassという変数として州の値を保持しています（これらの目的のために、ちょうどvarと考えることができるES6のlet宣言を使用しています）。 consoleにログを記録すると、探しているものが表示されます。

希望すると便利です。

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

<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>

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'); 
    } 

}); 

は、おそらく私はあなたしているイベントの委任にあなたが `tr.2`を書いていることに気づいtd代わりのtr