Question

嗨我想根据标签的颜色设置标签的文字颜色

HTML

<select class="widocznosc">
    <option value="prywatna" class="note_0">prywatna</option>
    <option value="publiczna" class="note_2">publiczna</option>
    <option value="tylko dla grupy" class="note_16">tylko dla grupy</option>
</select>

CSS

.note_0
{
    color: #b59285;
}
.note_2
{
    color: #e7511e;
}
.note_16
{
    color: #6a89a5;
}

的jQuery

jQuery("select.widocznosc").change(function(){
        jQuery(this).css("color", jQuery(this).children("option:selected").css("color")); 
    });

这在我更改选项时有效，但我希望在任何变更之前加载页面时设置颜色

帮帮我吧

Answer 1

你可以这样做：

jQuery("select.widocznosc").change(function(){
        jQuery(this).css("color", jQuery(this).children("option:selected").css("color")); 
    }).change();

请注意最后添加的.change()。这意味着首先在下拉列表中设置change处理程序，然后立即调用它。

注意：这将触发与这些下拉列表相关联的每个事件处理程序。

我差点忘了The Demo。

更新：请注意，您可以像这样重写代码，以避免不必要的jQuery()调用（性能提升很小，但对于更干净的代码，它也被视为最佳做法）：< / p>

jQuery("select.widocznosc").change(function(){
    var $this=jQuery(this);
    $this.css("color", $this.children("option:selected").css("color")); 
}).change();

将jQuery(this)的结果保存到局部变量中，然后使用它而不是多次调用该函数。您可以使用任何变量名称，我只使用$this来表示它存储了一个jQuery集合（这就是$）的原因。

Answer 2

使用此功能在启动时更改颜色ready() event

Answer 3

您可以使用类似这样的文档就绪事件。

的Javascript

var selected_color;

jQuery("select.widocznosc").change(function(){ 
  jQuery(this).css("color", jQuery(this).children("option:selected").css("color")); 
});

jQuery(document).ready(function() {
  selected_color = jQuery("select.widocznosc option:selected").css("color");
  jQuery("select.widocznosc").css("color", selected_color); 
});

Answer 4

试试这个

function modify_color(){
            $(".widocznosc").css("color", $(".widocznosc")).children("option:selected").css("color")); 
        } 


$(document).ready(function() { 

 modify_color();

}


$("select.widocznosc").change(modify_color);

从<option> color </option> </select>设置<select>颜色

4 个答案: