Question

我正在尝试使用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>

Answer 1

你很亲密。在<head>中包含jQuery：

<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＆amp; jQuery函数。

Answer 2

我看到的最大问题是，除了缺少jQuery之外，你的js正在被立即执行。你的两次尝试都使用js来跟那些html节点所在的DOM交谈，但是，当你的脚本运行时，DOM还没有准备好这些节点。

jQuery offers a way to do this只有一条线，如果你喜欢那条路线。如果你想学习本机js，我强烈推荐，你会希望read up on在窗口准备就绪时进行监听。

Answer 3

回答你的问题：

第一个代码块（非jQuery）使用selectedIndex作为select元素，它返回所选项的数值（索引值）。您希望根据颜色地图检查字符串值。更新代码使其看起来像：

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

Answer 4

代码中有很多东西需要改变。

如果你是用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;


  };

您必须使用document.getElementById

附加onchange事件

如果jquery

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

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

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

你也缺少jquery库。

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

4 个答案: