Javascript將類添加到除一個之外的多個元素

Question

從 JavaScript 開始，我編寫了一個小腳本，它在單擊時向元素添加一個類，然后當且僅當另一個元素是單擊時刪除該類。

我試圖尊重 DRY，所以我知道我應該寫一個函數來避免重復代碼，例如：

function ToggleClass(element) {
  if (FacebookConst.classList.contains("link-ranking-active") || GoogleConst.classList.contains("link-ranking-active") || ComparisonConst.classList.contains("link-ranking-active") {
  //remove "link-ranking-active" class to all constants **BUT** of element    
  };  
};

但我不知道語法。

這是我的代碼：

 const GoogleConst = document.getElementById('Google'); const FacebookConst = document.getElementById('Facebook'); const ComparisonConst = document.getElementById('Comparison'); const Page = document.getElementById("result"); GoogleConst.addEventListener("click", e => { GoogleConst.classList.add("link-ranking-active"); if (FacebookConst.classList.contains("link-ranking-active") || ComparisonConst.classList.contains("link-ranking-active")) { FacebookConst.classList.remove("link-ranking-active"); ComparisonConst.classList.remove("link-ranking-active"); }; }); FacebookConst.addEventListener("click", e => { FacebookConst.classList.add("link-ranking-active"); if (GoogleConst.classList.contains("link-ranking-active") || ComparisonConst.classList.contains("link-ranking-active")) { GoogleConst.classList.remove("link-ranking-active"); ComparisonConst.classList.remove("link-ranking-active"); }; }); ComparisonConst.addEventListener("click", e => { ComparisonConst.classList.add("link-ranking-active"); if (FacebookConst.classList.contains("link-ranking-active") || GoogleConst.classList.contains("link-ranking-active")) { FacebookConst.classList.remove("link-ranking-active"); GoogleConst.classList.remove("link-ranking-active"); }; });

 .link-ranking-active{ box-sizing: border-box; position:relative; padding: 0.3em; height: 100%; width: 100%; border-radius: 0.3em; border: 0.15em solid #48ffd5; }

 <div class="page"> <div class="ranking" id="ranking"> <ul class="ul-menu"> <li class="li-menu"><a class="link-ranking" id="Google" href="#key">Google</a></li> <li class="li-menu"><a class="link-ranking" id="Facebook" href="#key">Facebook</a></li> <li class="li-menu"><a class="link-ranking" id="Comparison" href="#key">Comparison</a></li> </ul> </div> </div>

Answer 1

此處使用的技術稱為事件委托。 這是它的工作原理：

1. 在容器上設置單個事件處理程序
2. 如果不是錨標記，則忽略該事件
3. 否則，清除所有錨點的類名
4. 最后，將類名應用到事件的目標（被點擊的那個）。

 const container = document.querySelector('.ul-menu'); const anchors = document.querySelectorAll('.ul-menu li a'); container.addEventListener('click', (e) => { if (e.target.nodeName !== "A") return; anchors.forEach(anchor => { anchor.classList.remove('link-ranking-active'); }); e.target.classList.add('link-ranking-active'); });

 .link-ranking-active { box-sizing: border-box; position: relative; padding: 0.3em; height: 100%; width: 100%; border-radius: 0.3em; border: 0.15em solid #48ffd5; }

 <div class="page"> <div class="ranking" id="ranking"> <ul class="ul-menu"> <li class="li-menu"><a class="link-ranking" id="Google" href="#key">Google</a></li> <li class="li-menu"><a class="link-ranking" id="Facebook" href="#key">Facebook</a></li> <li class="li-menu"><a class="link-ranking" id="Comparison" href="#key">Comparison</a></li> </ul> </div> </div>

Answer 2

很高興你意識到你應該清理它。 一旦你看到它，代碼應該是相當不言自明的。

 const elements = ['Google', 'Facebook', 'Comparison'].map(id => document.getElementById(id)) const eventHandler = (e => { elements.map(element => element.classList.remove("link-ranking-active")) e.target.classList.add("link-ranking-active") }) elements.forEach(element => element.addEventListener("click", eventHandler))

 .link-ranking-active { box-sizing: border-box; position: relative; padding: 0.3em; height: 100%; width: 100%; border-radius: 0.3em; border: 0.15em solid #48ffd5; }

 <div class="page"> <div class="ranking" id="ranking"> <ul class="ul-menu"> <li class="li-menu"><a class="link-ranking" id="Google" href="#key">Google</a></li> <li class="li-menu"><a class="link-ranking" id="Facebook" href="#key">Facebook</a></li> <li class="li-menu"><a class="link-ranking" id="Comparison" href="#key">Comparison</a></li> </ul> </div> </div>

Answer 3

一個經典...

商品知道=
1- classList.toggle() 返回一個布爾值
2- classList.toggle( CLASSname, Force ) 使用強制設置類

 document .querySelectorAll('a.link-ranking') .forEach((aLink,_,arr)=>{ aLink.onclick =()=>{ if ( aLink.classList.toggle('link-ranking-active')) { arr.forEach(a=>a.classList.toggle('link-ranking-active',aLink===a)) }} })

 .link-ranking-active { box-sizing : border-box; position : relative; padding : 0.3em; height : 100%; width : 100%; border-radius : 0.3em; border : 0.15em solid #48ffd5; } ul.ul-menu li { margin : 1em ; }

 <div class="page"> <div class="ranking" id="ranking"> <ul class="ul-menu"> <li class="li-menu"><a class="link-ranking" id="Google" href="#key">Google</a></li> <li class="li-menu"><a class="link-ranking" id="Facebook" href="#key">Facebook</a></li> <li class="li-menu"><a class="link-ranking" id="Comparison" href="#key">Comparison</a></li> </ul> </div> </div>

如果您不想在第二次單擊時刪除該類：

 document.querySelectorAll('a.link-ranking').forEach((aLink,_,arr)=>{ aLink.onclick =()=>{ arr.forEach(a=>a.classList.toggle('link-ranking-active',aLink===a)) }})

 .link-ranking-active { box-sizing : border-box; position : relative; padding : 0.3em; height : 100%; width : 100%; border-radius : 0.3em; border : 0.15em solid #48ffd5; } ul.ul-menu li { margin : 1em ; }

 <div class="page"> <div class="ranking" id="ranking"> <ul class="ul-menu"> <li class="li-menu"><a class="link-ranking" id="Google" href="#key">Google</a></li> <li class="li-menu"><a class="link-ranking" id="Facebook" href="#key">Facebook</a></li> <li class="li-menu"><a class="link-ranking" id="Comparison" href="#key">Comparison</a></li> </ul> </div> </div>