使用選擇/選項更改文本顏色

我試圖改變文本顏色，使用Select對象試圖獲取我選擇的顏色並將其設置爲文本。有兩個函數對我的腳本進行了評論，這兩個函數都是我嘗試完成的，但都失敗了。不要求完整的答案/代碼，只是想知道什麼是錯的。這是代碼和感謝您的時間：使用選擇/選項更改文本顏色

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Hola Mundo Controles</title> 
     <meta name="author" content="José Del Valle Cordero"/> 
     <meta charset="utf-8" /> 
    </head> 

    <body> 
     <div class="main"> 
      <div class="subject" id="subject"> 
       <span id="salute">¡Hello!</span> 
      </div> 
      <div id="control"> 
       <div class="color_option"> 
        Color: 
        <select name="color_list" id="colors" > 
         <option value="cl_option1" checked="checked">Red </option> 
         <option value="cl_option2">Blue </option> 
         <option value="cl_option3">Yellow </option> 
         <option value="cl_option4">Black </option> 
        </select> 
       </div> 
      </div> 
     </div> 
    <script type="text/javascript"> 
     var item,cl; 
     var colorsMap = { 
      'cl_option1' : "red", 
      'cl_option2' : "blue", 
      'cl_option3' : "yellow", 
      'cl_option4' : "black" 
     }; 

     /*colors.onchange=function() { 
      var salute = document.getElementById("salute"); 
      var item = document.getElementById("colors").selectedIndex; 
      var color = colorsMap[item]; 
      salute.style.color = color; 

     };*/ 


     /*$('#colors').change(function(){ 
      var salute = document.getElementById("salute"); 
      item=$(this).val(); 
      cl = colorsMap[item]; 
      salute.style.color = cl; 
     });*/   
    </script> 
</body>

來源

2014-02-24 dlvx

你的第二個註釋的代碼塊是semi-jQuery，除非你包含jQuery，否則它將不起作用。 – j08691

這是我扔在一起的小提琴：http://jsfiddle.net/pH4wW/ - 第二個功能似乎工作？（在我做出改變後......） – Jack

OP只需要在他的HTML中包含jQuery。 – Raptor

有這麼多的事情在代碼被改變。

如果您正在使用JS做

colors.onchange=function(){ 
     var salute = document.getElementById("salute"); 
     var item = document.getElementById("colors").selectedIndex; 
     var color = colorsMap[item]; 
     salute.style.color = color; 


    };

必須改變以

document.getElementById("colors").onchange=function(){ 

     var salute = document.getElementById("salute"); 
     var item = document.getElementById("colors").value; 

     var color = colorsMap[item]; 
     document.getElementById("salute").style.color = color; 


    };

你必須附上

如果jQuery的

$('#colors').change(function(){ 

    var salute = document.getElementById("salute"); 
    item=$(this).val(); 
    cl = colorsMap[item]; 

    $('#salute').css('color', cl); 
    });

使用的document.getElementById

onchange事件

你還缺少jQuery庫。

來源

2014-02-24 03:46:49 Bala

你很近。包括jQuery的在<head>：

<script src="//code.jquery.com/jquery-latest.js"></script>

在JS

然後：

<script type="text/javascript"> 
var colorsMap = { 
    'cl_option1' : "red", 
    'cl_option2' : "blue", 
    'cl_option3' : "yellow", 
    'cl_option4' : "black" 
}; 


    $('#colors').change(function(){ 
    $("#salute").css('color', colorsMap[$(this).val()]); 
    }); 
    </script>

原來的劇本是太拙劣&混淆是非的jQuery & jQuery函數。

來源

2014-02-24 03:41:27 Raptor

我看到的最大的問題，除了你沒有在頁面中包含jQuery，你的js正在被馬上執行。您的兩次嘗試都使用js與那些html節點所在的DOM進行通信，但是，當您的腳本運行時，DOM未與這些節點做好準備。

jQuery offers a way to do this單行，如果你喜歡去那條路線。如果您想要學習本地js，我強烈建議您想讓read up on在窗口準備就緒時收聽。

來源

2014-02-24 03:46:33

回答您的問題：

的第一碼塊（非jQuery的）使用的selectedIndex爲您的選擇元件，將其返回所選擇的項目的數值（索引值）。你想要字符串值來檢查你的顏色映射。更新您的代碼，使其看起來像這樣：

var colors = document.getElementById('colors'); 
colors.onchange=function(){ 
    var salute = document.getElementById("salute"); 
    var item = document.getElementById("colors").value; 
    var color = colorsMap[item]; 
    salute.style.color = color; 
}

將工作。

更新小提琴：http://jsfiddle.net/pH4wW/2/

第二個，你只需要jQuery的:)

來源

2014-02-24 03:46:47 Jack

使用選擇/選項更改文本顏色

回答

相關問題