如何使用javascript for loop更改文本颜色？_Javascript

如何使用javascript for loop更改文本颜色？

javascript

如何使用javascript for loop更改文本颜色？,javascript,Javascript,当有人单击文本时，它会变为红色，然后单击另一个文本返回黑色。我制作了一个如下的示例，但如何使用for循环使其更短？ <html> <head> <title>My little test page</title> </head> <body id="body"> <div id="myid">Hello Here !!</div><br&

当有人单击文本时，它会变为红色，然后单击另一个文本返回黑色。我制作了一个如下的示例，但如何使用for循环使其更短？

    <html>
    <head>
    <title>My little test page</title>
    </head>
    <body id="body">
        <div id="myid">Hello Here !!</div><br>
        <div id="myid2">Hello There !!</div><br>
        <div id="myid3">Hello !!</div><br>
        ......many div......
    </body>
    </html>

    <script language="javascript">
    function changeColor1() {
    document.getElementById("myid").className = "red";
    document.getElementById("myid2").className = "";
    document.getElementById("myid3").className = "";
    }

    function changeColor2() {
    document.getElementById("myid").className = "";
    document.getElementById("myid2").className = "red";
    document.getElementById("myid3").className = "";
    }

    function changeColor3() {
    document.getElementById("myid").className = "";
    document.getElementById("myid2").className = "";
    document.getElementById("myid3").className = "red";
    }

    function init() {
    document.getElementById("myid").onclick = changeColor1;
    document.getElementById("myid2").onclick = changeColor2;
    document.getElementById("myid3").onclick = changeColor3;
    }

    window.onload = init();
    </script>


我的小测试页
你好

你好

你好

……许多部门。。。。。。
函数changeColor1（）{
document.getElementById（“myid”）.className=“红色”；
document.getElementById（“myid2”）.className=“”；
document.getElementById（“myid3”）.className=“”；
}
函数changeColor2（）{
document.getElementById（“myid”）.className=“”；
document.getElementById（“myid2”）.className=“红色”；
document.getElementById（“myid3”）.className=“”；
}
函数changeColor3（）{
document.getElementById（“myid”）.className=“”；
document.getElementById（“myid2”）.className=“”；
document.getElementById（“myid3”）.className=“红色”；
}
函数init（）{
document.getElementById（“myid”）.onclick=changeColor1；
document.getElementById（“myid2”）.onclick=changeColor2；
document.getElementById（“myid3”）.onclick=changeColor3；
}
window.onload=init（）；

试试这个

    <html>
        <head>
        <title>My little test page</title>
        </head>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
      <script language="javascript">
     $(".divid").click(function(e){
         $(".divid").css('color', '');
         $(this).css('color', 'red');

       });
       </script>
 <body id="body">
 <div id="myid" class="divid">Hello Here !!</div><br>
 <div id="myid2" class="divid">Hello There !!</div><br>
 <div id="myid3" class="divid">Hello !!</div><br>
 ......many div......
 </body>
 </html>


我的小测试页
$（“.divid”）。单击（函数（e）{
$（“.divid”）.css（'color'，''）；
$（this.css（'color'，'red'）；
});
你好

你好

你好

……许多部门。。。。。。

示例

向所有div添加一个属性名，如下所示

<div id='myid' name='colorchangingdiv[]'>Hello</div>
<div id='myid2' name='colorchangingdiv[]'>Hello</div>
....

你好你好 .... 现在在init函数中

function init() {
var allDivs = document.getElementsByName('colorchangingdivs[]');

    for( var i =0; i < allDivs.length; ++i )
    {
       allDivs[i].onClick = changeColor(this);
    }
}

函数init（）{
var allDivs=document.getElementsByName（'colorchangingdivs[]）；
对于（变量i=0；i


在“更改颜色”函数中
function changeColor( obj )
{
    var allDivs = document.getElementsByName('colorchangingdivs[]');

    for( var i =0; i < allDivs.length; ++i )
    {
       allDivs[i].style.color = '';
    }

    // Now set the color to the obj passed
    obj.style.color = 'red';
 }

功能更改颜色（obj）
{
var allDivs=document.getElementsByName（'colorchangingdivs[]）；
对于（变量i=0；i

希望有帮助。

<html>
<head>
<style>
  .red{
  color:red;
 }
</style>
<title>My little test page</title>
<script type="text/javascript" src="jquery.js">
<script language="javascript">
  //use jquery for change your color
  $(document).ready(function(){
   $(".myclass").click(function(){
    $(".myclass").removeClass("red");
    $(this).addClass("red");
   });
  });
</script>
</head>
<body id="body">
    <div class="myclass">Hello Here !!</div><br>
    <div class="myclass">Hello There !!</div><br>
    <div class="myclass">Hello !!</div><br>
    ......many div......
</body>
</html>

瑞德先生{
颜色：红色；
}
我的小测试页
//使用jquery更改颜色
$（文档）.ready（函数（）{
$（“.myclass”）。单击（函数（）{
$（“.myclass”）.removeClass（“红色”）；
$（此）.addClass（“红色”）；
});
});
你好

你好

你好

……许多部门。。。。。。
为方便起见，请使用类，而不是上述div标记的id属性，或者除了这些属性之外：
<!DOCTYPE html>
<html>
   <head>
      <title>My little test page</title>
   </head>
   <body id="body">
      <div class="mytext">Hello Here !!</div><br>
      <div class="mytext">Hello There !!</div><br>
      <div class="mytext">Hello !!</div><br>

      <script>
        var myselector = 'div.mytext';
        function changeColor( e ){
          var x=document.querySelectorAll(myselector);
          for(i=0;i<x.length;i++){
            x[i].style.color = '';
          }
          e.target.style.color = 'red';
        }      
        function init(){
          var x=document.querySelectorAll(myselector);
          for(i=0;i<x.length;i++){
            x[i].addEventListener("click", function(e){
              changeColor(e);
            });
          }
        }
        window.onload = init();
      </script>
   </body>
</html>


我的小测试页
你好

你好

你好

var myselector='div.mytext'；
函数更改颜色（e）{
var x=document.querySelectorAll（myselector）；
对于（i=0；我问如何在循环中执行此操作，当前文本的颜色是否应更改，或者是否要将名为“red”的类应用于它？上面的代码更改了类，但没有样式信息，因此它将不可见。