用少于20行代码更改多文本的颜色

Question

我有8个段落，我希望当我单击这8个中的一个时，类' one‘p class =“one”激活"one- active“，然后删除其他活动。

在不到20行或更多的代码中，这就是我到目前为止所做的，代码运行和工作，但是对于8行代码来说，p>是太多的代码，我可以用更少的代码行来做同样的事情。我只为两个p写，因为有很多代码

​

let one = document.querySelector('.one')
let two = document.querySelector('.two')
let three = document.querySelector('.three')
let four = document.querySelector('.four')
let five = document.querySelector('.five')

function changecolor1(){
  one.classList.toggle('one-active');
  two.classList.remove('two-active');

} 
function changecolor2(){
  two.classList.toggle('two-active');
  one.classList.remove('one-active')

}   
  
  const ButtonChange1 = () => {
    one.addEventListener('click', () => {
      changecolor1();
    });
  }
  ButtonChange1();
  
  const ButtonChange2 = () => {
    two.addEventListener('click', () => {
      changecolor2();
    });
  }
  ButtonChange2();

.one{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.one-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }
  .two{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.two-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }
  .three{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.three-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }
  .four{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.four-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }

  .five{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.five-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }

            <p class="one">COSA È</p>
            <p class="two">COSA È</p>
            <p class="three">COSA È</p>
            <p class="four">COSA È</p>
            <p class="five">COSA È</p>

​

Answer 1

首先，对于每个p元素不需要单独的类。只要一个CSS规则就可以指示条目是活动的了。而且，对于每个元素，您也不需要一个单击处理程序，而是可以在父元素上使用一个单击处理程序来处理激活和取消激活。

​

let container = document.querySelector(".container");

container.addEventListener("click", ({
  target
}) => {
  if (target.nodeName !== "P") return; // return if p is not clicked
  Array.from(document.querySelectorAll(".container>p")).forEach(p => p.classList.remove("active")); // make the others inactive
  target.classList.toggle("active");
});

.container p {
  color: rgb(11, 28, 47);
  background-color: rgb(255, 255, 2);
}

.container p.active {
  color: rgb(255, 255, 255);
  background-color: rgb(11, 28, 47) !important;
}

<div class="container">
  <p class="active">COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
</div>

​