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的简单解决方案

＆＃13;

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)";
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

我们需要使用document.querySelectorAll来查询具有相同class名称的所有元素。

以下是工作示例，纯javascript。

＆＃13;

function change(element){

var elementClassName = element.className;
var allElements = document.querySelectorAll('.' + elementClassName);

  for (var i = 0; i < allElements.length; i++) {

    var changeColorElement = allElements[i];

    // Your logic here
    if (changeColorElement.style.color == "rgb(252, 198, 162)") {
      changeColorElement.style.color="rgb(220, 20, 60)";
    } else {
      changeColorElement.style.color = "rgb(252, 198, 162)";
    }


  }

}

＆＃13;

<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>

＆＃13;

Answer 3

如brk所说，使用一个公共类，你可以编写这样的代码来第二次工作。

function change(div) 
{ 
if (div.style.color == "rgb(252, 198, 162)"){
$('.t1').css('color',"rgb(220, 20, 60)"); 
} 
else {
$('.t1').css('color', "rgb(252, 198, 162)");
}

没有p

Answer 4

<!DOCTYPE html>
<html>
<body>

<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);" onclick="change(this);">    
  <p> test </p>    
</div>    
<div class="t1" style="color: rgb(252,198,162);" onclick="change(this);">    
  <p>test</p>    
</div>


<script>
function change(e){
var all = document.querySelectorAll("."+e.className);
if (typeof all !== "undefined") {

for (var i = 0; i < all.length; i++) {
    if(all[i].style.color == "rgb(252, 198, 162)")
    {
    all[i].style.color="rgb(220, 20, 60)";
    }
    else
    {
    all[i].style.color="rgb(252, 198, 162)";
    }
}
}
}
</script>

</body>
</html>

帮助你。

如何在点击时更改文字的颜色

4 个答案: