Jquery Onclickおよびクリックされたオブジェクトへの参照
質問
次の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
});
これにより、クリックが登録された要素を確実にターゲットにすることができます。ボタン内にネストされたマークアップ(またはなど)がある場合、クリックを割り当てる要素ではなく、イベントターゲットをネストされた要素にすることができます。