リンクを含むナビゲーションコントロールがあります。
ユーザーがリンクをクリックしたときに、2つのリンクのクラス属性を切り替えたいと思います。
クリックされたリンクに「targeted」のクラスを割り当てたい。
また、前に選択したリンクから「targeted」クラスを削除したいと思います。
これが私の現在のes6jsです。
$(() => {
//when one is clicked, remove the class from each of them and then add the class to the one that was clicked
$(document).on("click", ".tools-cover .tools-container > .row > .col-xs-12 > nav ul li a", (e) => {
$(document).find(".tools-cover .tools-container > .row > .col-xs-12 > nav ul li a").removeClass("targeted");
$(this).toggleClass("targeted");
});
//when the page has loaded, click the first nav link on the nav
$(document).find(".tools-cover .tools-container > .row > .col-xs-12 > nav ul li:first-child a").click();
});
<div class="tools-cover">
<div class="container tools-container">
<div class="row">
<div class="col-xs-12">
<nav>
<ul>
<li><a href="#">Feeds</a>
</li>
<li><a href="#">Wearisma links</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
矢印関数には独自のthis
がないため、jQueryはそれを現在の要素に設定できません。「通常の」関数をイベントハンドラーとして使用するe.target
か、のe.currentTarget
代わりにまたは(これがイベント委任でどの程度うまく機能するかわからない)を使用する必要がありthis
ます。
矢印関数と関数宣言/式も参照してください:それらは同等/交換可能ですか?
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加