2

我正在编写一些代码，基本上我有一个表格。在该表单上是一个选择选项，我希望用户在其中选择字体颜色。然后，我需要将该选项附加到页面上的元素，方法是添加他们选择作为 css 类的选项。需要现场做这个。

所以形成这样的元素：

<select id="selectcolor" name="selectcolor" style="width: 200px;">
                        <option value="null">-- Select a Color ... --</option>
                        <option value="black">Black</option>
                        <option value="white">White</option>
                </select>

我做的JS是：

//select text color
    $("#selectcolor").change(function(){
    var color = $(this).val();
    $(".selectcolor").css("color", 'color');

将更改应用到的 HTML：

<div class="rightBottom selectcolor">Change this text<br />color</div>

然后在css中我要做：

.black {color:#000;}
.white {color:#fff;}

等等

基本上，当用户更改选择选项时，假设为黑色，类属性将 div / span 元素上的文本颜色更改为黑色。ETC

请有任何建议，我尝试添加选择选项值颜色：#000 等但没有用，我猜我忽略了几个问题......

先感谢您

4

4 回答 4

2 
$('#selectcolor').change(function() {
    var color = this.value || '';
    $('.selectcolor').attr('class', function(i, classes) {
        var cls = classes.split(/[\s]/);
        cls[2] = color;
        return cls.join(' ');
    });
});

演示

于 2012-06-20T01:25:17.067 回答
1

我认为这是因为您使用的是常量“颜色”而不是使用可变颜色。换行：

 $(".selectcolor").css("color", 'color');

至：

$(".selectcolor").css("color", color)
于 2012-06-20T01:23:00.043 回答
0

正如我所理解的那样，您希望元素根据选定的选项值获得正确的类名；

因此，这是想到的解决方案：

<select id="selectcolor" name="selectcolor" style="width: 200px;">
     <option value="null">-- Select a Color ... --</option>
     <option value="000000">Black</option>
     <option value="ffffff">White</option>
</select>

$("#selectcolor").change(function(){
    var color = $(this).val();
    $(".selectcolor").css('color', '#'+ color);
}

希望它可以帮助你。我没有测试代码，但它背后的想法是您将选项值设置为不带 # 符号的颜色代码，因此在第三行查询中会将 # 粘贴到字符串中。在 jQuery 中使用变量时要小心，不要用 \' 包围它，因为它会将其解释为静态文本。

于 2013-02-22T14:14:36.147 回答
0

我认为你需要改变

$(".selectcolor").css("color", 'color');

至

$(".selectcolor").css("color", color);

于 2012-06-20T01:25:18.207 回答