クリックしたもの以外のすべてのli要素からアクティブクラスを削除するにはどうすればよいですか？

Question

私の心の中でスライダーを完成させることはできません。また、JQueryを使用しないことにも注意したいと思います。 JavaScriptの場合のみ。私はいろいろ試しましたが、効果がありませんでした。

var ul = document.querySelector('ul'); 
 
var dots = []; 
 

 
for (var i = 0; i < 5; i++) { 
 
    var dot = document.createElement('li'); 
 
    dots.push(dot); 
 
    ul.appendChild(dot); 
 
} 
 
dots[2].setAttribute('class', 'active');

li { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: lightgrey; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    border-radius: 100%; 
 
    margin-right: 15px; 
 
} 
 

 
.active { 
 
    background-color: grey; 
 
}

<ul></ul>

ここJSFiddleリンクです：https://jsfiddle.net/heybetov1998/camuyve2/4/

Answer 1

は、あなたがドットのイベントハンドラをフックすることができます。イベントハンドラ内では、thisは、ハンドラをアタッチした要素を参照します。その後、他のすべてのクラスを削除することができます。

var ul = document.querySelector('ul'); 
 
var dots = []; 
 

 
for (var i = 0; i < 5; i++) { 
 
    var dot = document.createElement('li'); 
 
    dot.addEventListener("click", clickHandler); // ** Hook up the handler 
 
    dots.push(dot); 
 
    ul.appendChild(dot); 
 
} 
 
dots[2].setAttribute('class', 'active'); 
 

 
// Here's the handler 
 
function clickHandler() { 
 
    var dots = document.querySelectorAll("li"); 
 
    for (var n = 0; n < dots.length; ++n) { 
 
    if (dots[n] !== this) { 
 
     dots[n].className = ""; 
 
    } 
 
    } 
 
    this.className = "active"; 
 
}

li { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: lightgrey; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    border-radius: 100%; 
 
    margin-right: 15px; 
 
} 
 

 
.active { 
 
    background-color: grey; 
 
}

<ul></ul>

をあなたはaddEventListenerを持っていない古いブラウザをサポートする必要がある場合は、this answerはそれを行うための機能を持っています。

これは最小変更バージョンです。しかし、私が作って見たいいくつかの変更があります。

• はclass属性を設定するsetAttributeを使用しないでください。非常に古いバージョンのIEでは失敗しますが、もっと重要なことは、要素のクラスを完全に置き換えることです。 classListを見てください。

• 上記の例では、各ドットにイベントハンドラをフックしていますが、ドットをたくさん持っている、または追加/動的にそれらを削除する場合は、あなたがフックアップによりイベント委任を使用したほうが良いかもしれませんどのドットがクリックされたかを判断するにはe.targetを使用します。

Answer 2

あなたが追加しているli要素のクリックイベントにリスナーを割り当てるためにaddEventListenerを使用してください。

リスナー関数内では、すべてのli要素のアクティブなクラスを削除して、thisを使用してクリックしたものにのみ追加することができます。

要素のプロパティを追加/削除するには、要素のclassListプロパティを使用します。

var ul = document.querySelector('ul'); 
 
var dots = []; 
 

 
function dotClicked() { 
 
    dots.forEach(function(li) { 
 
    li.classList.remove("active"); 
 
    }); 
 
    this.classList.add("active"); 
 
} 
 

 
for (var i = 0; i < 5; i++) { 
 
    var dot = document.createElement('li'); 
 
    dot.addEventListener("click", dotClicked); 
 
    dots.push(dot); 
 
    ul.appendChild(dot); 
 
}

li { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: lightgrey; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    border-radius: 100%; 
 
    margin-right: 15px; 
 
} 
 

 
.active { 
 
    background-color: grey; 
 
}

<ul></ul>

Answer 3

ここではあなたのためにそれを行いますイベントハンドラです。

function handler(event) { 
    for (const li of document.querySelectorAll("li.active")) { 
    li.classList.remove("active"); 
    } 
    event.currentTarget.classList.add("active"); 
} 

イベントハンドラを設定し、必要に応じて従来のブラウザサポートについて把握しておきます。