2

所以我有这个选择标签

<select id="patient_color_id" name="patient[color_id]">
 <option selected="selected" value="1">blue</option>
 <option value="2">yellow</option>
 <option value="3">green</option>
 <option value="4">red</option>
</select>

值 0...4 来自数据库，因此我无法将它们更改为十六进制颜色值。无论如何，在我的 jquery 文件中，我有

$("#patient_color_id").change(function(){
if($(this).val() == "1"){
    $(".general-info").css('background-color', "#00FFFF");
}
if($(this).val() == "2"){
    $(".general-info").css('background-color', "#F0FFFF");
}
if($(this).val() == "3"){
    $(".general-info").css('background-color', "#0FFFFF");
}
if($(this).val() == "4"){
    $(".general-info").css('background-color', "#FFFFFF");
}
});

因此，当我从下拉菜单中选择一种颜色时，general-info div 的背景颜色应该会发生变化，但什么也没有发生，我不知道出了什么问题。

附言。我正在使用rails，但我不相信这与此有关。我使用的所有其他脚本都工作正常。

4

3 回答 3

3

我将您的代码复制到 jsFiddle 并添加到 generalInfo div 中，您的代码似乎工作正常。我要做的唯一观察是，您的某些颜色值显示为白色，可能是颜色的无效十六进制值，因此可能会误导您。如果有帮助，您可以在此处查看 jsFiddle。我建议您进行包装，但这并不重要，因为您必须参加更改事件。

这是 jsFiddle http://jsfiddle.net/danieljordan13/G7v9r/

我唯一改变的是我知道工作的随机颜色值。

$("#patient_color_id").change(function(){
if($(this).val() == "1"){
    $(".general-info").css('background-color', "#ddbbFF");
}
if($(this).val() == "2"){
    $(".general-info").css('background-color', "#aaddFF");
}
if($(this).val() == "3"){
    $(".general-info").css('background-color', "#cceeFF");
}
if($(this).val() == "4"){
    $(".general-info").css('background-color', "#bbbbFF");
}
});
于 2013-04-13T21:21:04.190 回答
2

AFAIK 代码看起来是正确的，您可能是在渲染 dom 之前添加了侦听器。要检查是否是这种情况，您可以尝试查看以下代码是否有效。

如果这可行，请尝试在 dom 渲染完成后添加侦听器。

$("#patient_color_id").on("change", function(){
if($(this).val() == "1"){
alert("1");
$(".general-info").css('background-color', "#00FFFF");
}
if($(this).val() == "2"){
alert("2");
$(".general-info").css('background-color', "#F0FFFF");
}
if($(this).val() == "3"){
alert("3");
$(".general-info").css('background-color', "#0FFFFF");
}
if($(this).val() == "4"){
alert("4");
$(".general-info").css('background-color', "#FFFFFF");
}
});
于 2013-04-13T21:14:39.057 回答
1

微妙的颜色太微妙

实际上，jQuery 很好，颜色代码有点太微妙了，可能在某些显示器上看不到：

尝试：

$("#patient_color_id").change(function(){
if($(this).val() == "1"){
    $(".general-info").css('background-color', "#0000FF");
}
if($(this).val() == "2"){
    $(".general-info").css('background-color', "#FFFF00");
}
if($(this).val() == "3"){
    $(".general-info").css('background-color', "#00FF00");
}
if($(this).val() == "4"){
    $(".general-info").css('background-color', "#FF0000");
}
    alert("color: "+$(this).val());
    alert($(".general-info").css('background-color'));
});

小提琴：http: //jsfiddle.net/audetwebdesign/yazhk/

警报仅用于诊断目的。红鲱鱼，很常见。

于 2013-04-13T21:18:32.270 回答