使用选择/选项更改文本颜色

我试图改变文本颜色，使用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

使用选择/选项更改文本颜色

回答

相关问题