настройка цвет из color

ProgramBox

настройка цвет из color

Post author:admin
Запись опубликована:27 апреля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

привет, я хотел бы установить цвет текста тега из цвета тега

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")); 
    });

это работает, когда я меняю параметры, но я хочу установить цвет при загрузке страницы перед любыми изменениями

помогите мне, пожалуйста

1. это произойдет автоматически, поскольку ваш css загружен вместе со страницей, и вы присвоили класс каждому параметру. jQuery вообще не нужен, смотрите здесь : jsfiddle.net/22H8p . автоматически срабатывает при изменении

2. Какому элементу требуется задать цвет при загрузке страницы? Все варианты или только один из них?

3. @diEcho это работает только в IE, а не в других браузерах

Ответ №1:

Вы можете сделать это:

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

Обратите внимание на добавленное .change() в конце. Это означает, что сначала вы устанавливаете change обработчик в выпадающем списке, а затем немедленно вызываете его.

Примечание: Это приведет к запуску каждого обработчика событий, который вы связали с этими выпадающими списками.

И я чуть не забыл демо.

ОБНОВЛЕНИЕ: Пожалуйста, обратите внимание, что вы могли бы переписать свой код подобным образом, чтобы избежать ненужных jQuery() вызовов (небольшой прирост производительности, но это считается лучшей практикой и для более чистого кода):

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

Вы сохраняете результат jQuery(this) в локальную переменную и используете ее вместо многократного вызова функции. Вы можете использовать любое имя переменной, я просто использовал $this , чтобы указать, что в нем хранится коллекция jQuery (вот почему $ ).

1. это работает, но в Firefox он устанавливает белый цвет, он устанавливает белый цвет после ваших изменений, кто-нибудь знает, почему?

2. Нет, вы будете вызывать все события ‘change’, связанные с конкретным выбором.

3. @gidzior Я думаю, что это заслуживает отдельного вопроса, чтобы получить наилучшие ответы.

4. @Tadeck Да, это вызовет каждый связанный обработчик изменений. Я обновлю свой ответ.

5. что ж, я считаю, что ему следует начать учиться использовать функцию document.ready, если ему нужно сделать что-то подобное позже, он может добавить все необходимые функции в готовую часть.

Ответ №2:

используйте это, чтобы изменить цвет при запуске события ready()

Ответ №3:

Вы можете использовать событие document ready примерно следующим образом.

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); 
});

1. это работает, но в Firefox он устанавливает белый цвет, он устанавливает белый цвет после ваших изменений, кто-нибудь знает, почему?

2. я согласен с Ником, но вы повторяете код, поэтому каждый раз, когда он хочет что-то изменить, ему приходится делать это в двух местах, было бы лучше поместить это в функцию и вызвать ее.

3. Скрипт выполняется после того, как вся страница будет готова. Есть ли у вас в вашем CSS что-нибудь, что могло бы изменять цвет на белый при загрузке страницы?

4. -1 для излишне повторяющегося кода и излишне повторяющихся селекторов

5. @Luci Да, скрипт на самом деле не оптимизирован, но я бы не стал особо беспокоиться об этом, если бы это был единственный скрипт на странице.

Ответ №4:

попробуйте это

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


$(document).ready(function() { 

 modify_color();

}


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