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

當有人點擊文字時，它會變成紅色，然後點擊其他文字返回黑色。我已經做了一個像下面的例子，但如何使它更短使用循環？如何使用javascript for loop更改文本顏色？

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

來源

2013-02-14 william lau

如果目前的文字變化的只是顏色，或你想要一個類命名爲'紅'適用於它？上面的代碼改變了類，但是沒有樣式信息，所以它將不可見。 – Dangelov 2013-02-14 04:35:48

在你的初始化函數

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

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

添加屬性名稱到所有的div，像這樣

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

現在，在你換色功能

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'; 
}

希望有幫助。

來源

2013-02-14 04:12:49 SHANK

試試這個。

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

例jsfiddle

來源

2013-02-14 04:05:34

他問如何在循環中做到這一點 – Yang 2013-02-14 04:13:10

for循環在哪裏？誰在那裏做了贊成呢？ – SHANK 2013-02-14 04:14:04

現在檢查這一個。 – 2013-02-14 04:52:53

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

來源

2013-02-14 04:13:49 Willy

爲了方便起見，使用類來代替，或者除了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>

來源

2013-02-14 04:30:11 Dangelov

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

回答

相關問題