javascript - 单击时如何更改文本的颜色

Question

我希望能够更改文本的颜色，类中的“test”，单击它们时的“t1”。我希望它们都在仅单击一个时改变颜色。如您所见，它们被另一个 div 分隔，这只是因为这是我希望它们在我的页面上的顺序。

感谢您的帮助!

<script>

function change(div){
    if (div.style.color == "rgb(252, 198, 162)")
    {
        div.style.color="rgb(220, 20, 60)";
    }
    else
    {
        div.style.color="rgb(252, 198, 162)";
    }
}
</script>


<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">    
  <p>test</p>    
</div>    
<div class="t2" style="color: rgb(252, 198, 162);" onlcick="change(this);">    
  <p> test </p>    
</div>    
<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">    
  <p>test</p>    
</div>

Answer 1

这是一个使用纯 javascript 的简单解决方案

function change(div) {

  var clasNs = div.className; //get class name of the clicked element

  var elements = document.querySelectorAll("." + clasNs); // get all element that has this class name
  elements.forEach(myFunction) // for each element change color

}

function myFunction(item) {
  if (item.style.color == "rgb(252, 198, 162)") {
    item.style.color = "rgb(220, 20, 60)";
  } else {
    item.style.color = "rgb(252, 198, 162)";
  }
}

<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">
  <p>test</p>
</div>
<div class="t2" style="color: rgb(252, 198, 162);" onlcick = "change(this);">
  <p> test </p>
</div>
<div class="t1" style="color: rgb(252,198,162);" onclick = "change(this);">
  <p>test</p>
</div>