Question

我正在处理一些代码，基本上我有一个表单。在该表单上是一个选择选项，我希望用户选择字体颜色。然后，我需要将该选项附加到页面上的元素，方法是添加他们选择作为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;}

等

基本上，当用户更改选择选项时，让我们说黑色，class属性会在div / span元素上将文本颜色更改为黑色。等

请给我任何建议，我尝试添加选择颜色选项颜色：＃000等但是没有用，我猜这是我忽略的几个问题......

提前谢谢

Answer 1

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

<强> DEMO

Answer 2

我认为这是因为你使用常量'颜色'而不是使用变色。改变这一行：

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

为：

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

Answer 3

我认为你需要改变

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

到

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

Answer 4

据我所知，你希望元素根据所选的选项值获得正确的类名;

所以，这是我想到的解决方案：

<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中的变量时不要小心，因为它会将其解释为静态文本。

从选择选项更改字体颜色

4 个答案: