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- classList.toggle()返回布尔值

2- classList.toggle( CLASSname，Force )使用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>

​

Answer 2

这里使用的技术称为事件委托。以下是它的工作原理：

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 3

很高兴你意识到你应该把这件事清理干净。当您看到代码时，代码应该是相当不言自明的。

​

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>

​