jQueryを使わずにクリックした要素以外にクラスが付いていた時、そのクラスを削除したい

Question

jQueryを使わず、純粋なJavaScriptのみでクラスの追加・削除を行いたいです。

追加すること、もう一度同じ要素をクリックすることでクラスの追加・削除を行うことはできるのですが、
「クリックした要素以外にクラスが付いていた場合、そのクラスを削除する」方法がわかりません。

<div id="top-tabmenu-list">
	<ul>
		<li class="top-tabmenu-item"><label for="tab-1">AAA</label></li>
		<li class="top-tabmenu-item"><label for="tab-2"></i>BBB</label></li>
		<li class="top-tabmenu-item"><label for="tab-3">CCC</label></li>
		<li class="top-tabmenu-item"><label for="tab-4">DDD</label></li>
		<li class="top-tabmenu-item"><label for="tab-5">EEE</label></li>
	</ul>
</div>

function tabBar_animation(){
	var tabBar = document.querySelectorAll('#top-tabmenu-list li');
    for (var i = 0; i < tabBar.length; i++){
        tabBar[i].addEventListener("click", function(){
            this.classList.toggle('tab_link');
        });
    }

}
tabBar_animation();

追記情報

function tabBar_animation(){
	var tabBar = document.querySelectorAll('#top-tabmenu-list li');
    for (var i = 0; i < tabBar.length; i++){
        tabBar[i].addEventListener("click", function(){
        	var tabLink = document.querySelectorAll('.tab_link').length;
            this.classList.toggle('tab_link');
            if ( tabLink > 1 ){
            	this.classList.remove('tab_link');
            }
        });
    }
}
tabBar_animation();

Comments

[x_x]

要件が明確でないため、jQuery のコードがあるなら一緒に提示したほうがいいでしょう。

Answer 1

<div id="top-tabmenu-list">
  <ul>
    <li class="top-tabmenu-item"><label for="tab-1">AAA</label></li>
    <li class="top-tabmenu-item"><label for="tab-2"></i>BBB</label></li>
    <li class="top-tabmenu-item"><label for="tab-3">CCC</label></li>
    <li class="top-tabmenu-item"><label for="tab-4">DDD</label></li>
    <li class="top-tabmenu-item"><label for="tab-5">EEE</label></li>
  </ul>
</div>
<script>
function tabBar_animation() {
  var tabBar = document.querySelectorAll('#top-tabmenu-list li');
  tabBar.forEach(el => {
    el.addEventListener('click', () => {
      tabBar.forEach(el => {
        el.classList.remove('tab_link');
      });
      el.classList.add('tab_link');
    });
  });
}
tabBar_animation();
</script>

Comments

[aguu0101]

ありがとうございます！
そのままコピペでいけてしまいました。
なぜそうなってるのか正直わからないのでここは自分で調べてみます。

[think49]

同じ要素を連続してクリックした際の挙動が考慮されていないように読めます。
質問コードのclassList.toggle()に倣うなら、全ての要素が .tab_link を持っていない状況があります。

[yasutomi]

質問コードは質問者の意図とは異なるのでclassList.toggle()に倣う必要はないです。
> 質問コードのclassList.toggle()に倣うなら、
> 全ての要素が .tab_link を持っていない状況があります。

[think49]

私の認識では、要件は下記でした。

> 追加すること、もう一度同じ要素をクリックすることでクラスの追加・削除を行うことはできるのですが、
< 「クリックした要素以外にクラスが付いていた場合、そのクラスを削除する」方法がわかりません。

「クリックした要素には必ずクラスを付ける」とい要件には読めなかったので、指摘した状況です。

Answer 2

常に1つ以下の要素に .tab_link があるとするなら、「event.currentTarget.classList.contains('tab_link') の真偽値」で場合分けして考えれば、答えは出ます。

classList.contains('tab_link') === true

1. 他の要素は .tab_link を持っていない
2. event.currentTarget.classList.remove

classList.contains('tab_link') === false

1. 他の要素は .tab_link を持っている可能性がある
2. document.querySelector('.tab_link') がtruthyなら、当該要素ノードを classList.remove
3. event.currentTarget.classList.add

Re: aguu0101 さん

Comments

[aguu0101]

いただいた情報を元に修正したところ無事思っていた挙動ができました。
ありがとうございます。

Answer 3

こんな感じ？

<style>
.top-tabmenu-item{color:red;}
.tab_link{background-Color:yellow;}
</style>

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#top-tabmenu-list li'),function(x){
    x.addEventListener('click',function(e){
      const cls='tab_link';
      x.classList=x.classList.contains(cls)?[cls]:[];
      x.classList.toggle(cls);
    });
  });
});
</script>
<div id="top-tabmenu-list">
<ul>
<li class="top-tabmenu-item"><label for="tab-1">AAA</label></li>
<li class="top-tabmenu-item"><label for="tab-2"></i>BBB</label></li>
<li class="top-tabmenu-item"><label for="tab-3">CCC</label></li>
<li class="top-tabmenu-item"><label for="tab-4">DDD</label></li>
<li class="top-tabmenu-item"><label for="tab-5">EEE</label></li>
<li class="a b c d">XXX</li>
<li class="a b c d tab_link">YYY</li>
</ul>
</div>

Answer 4

単に数えればいいのでは？

document.querySelectorAll('.tab_link').length > 1

Comments

[aguu0101]

回答ありがとうございます。
いただいた情報をもとにやってみましたが、できませんでした。
そもそも書き方が間違っているかもしれないので追記情報に試したコードを追加しています。

宜しくお願いします。

[x_x]

要件が明確でないため、判定部分のみを提示しました。

「クリックした要素以外にクラスが付いていた場合」というのがクリックした要素には当然クラスがあると思っていたのですが、そうでない場合があるのであればその判定も必要です。

「そのクラスを削除する」
どこから削除するのか不明です。すべて削除するということならループを回してください。