Jquery Onclickおよびクリックされたオブジェクトへの参照

StackOverflow https://stackoverflow.com/questions/1043797

  •  20-08-2019
  •  | 
  •  

質問

次のjQuery式があります。関数内では、クリックされたオブジェクトへの参照が必要ですが、これを行う方法はありますか？

$('#tagList li').click(function() {
  /* contents */
});
役に立ちましたか？

解決

使用

$(this)

他のヒント

戻り値を使用できます

$("#tagList li").bind("click", function(e) {
    alert(e.currentTarget + ' was clicked!');
});

または必要に応じて、jQueryモードでオブジェクトを簡単にポイントできます

$("#tagList li").bind("click", function(e) {
    alert($(this) + ' was clicked!');
});

jQueryを初めて使用する場合は、 。 > jQuery for Designers の> Remy Sharp jQueryの仕組みを少し理解するのに最適です。さらに、使用可能なオブジェクトを表示するために console.log（）を使用する方法もお勧めです！

はい、thisキーワードはクリックされたDOM要素を参照します。 <！> quot; wrap <！> quot;次のようになります：

$(this)

これにより、jQueryオブジェクトとして扱うことができます。

this キーワードが探しています。多くの場合、jQuery関数を this に適用してジョブを実行します。例：

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});

より多くのユースケース、特に矢印関数を使用する場合をカバーする新しい回答を追加します。

li要素にJSクリックを追加しないこともお勧めします。代わりに、この要素内にネストされたボタンまたはアンカー（クリック可能なもの）を使用する必要があります。

クリックする要素は子になる可能性があるため、正しい要素をターゲットにしていることを確認する必要があります。

この例では、li内のボタンとその上のクラスにクリックを割り当てます。マークアップは次のようになります。

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

次に、javascript：

$('#tagList li button.tag-button').click((e) => {
  const thisButton = $(e.target).hasClass('tag-button')
    ? $(e.target) : $(e.target).closest('.tag-button');
  // do something with thisButton
});

これにより、クリックが登録された要素を確実にターゲットにすることができます。ボタン内にネストされたマークアップ（またはなど）がある場合、クリックを割り当てる要素ではなく、イベントターゲットをネストされた要素にすることができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top