Изменение CSS путем вставки переменной с помощью jquery
Я пытаюсь изменить css класса с помощью jquery 3 и изменить цвет фона.
Сначала я конвертирую цветовой код rgba (properties.color) в шестнадцатеричный код, который прекрасно работает.
Затем я меняю фон класса «zu-default div» с помощью jquery. Однако это не работает, когда я вставляю переменную «finalcolor». Когда я жестко задаю шестнадцатеричный цвет, такой как «#fec23b», изменение становится видимым. Когда я использую переменную «finalcolor», изменений нет. Вывод переменной finalcolor на консоль показывает, что это идеальный шестнадцатеричный код.
Какие-либо предложения?
// converts a rgba to hex
let finalcolor = rgb2hex(properties.color);
//prints the converted hexadecimal (for eg: #fec23b)
console.info(finalcolor);
//Should modify the background of the zu-default div class to the color „finalcolor“
$('.zu-default div').css("background", finalcolor);
Вы пробовали сделать жесткую перезагрузку/очистку кеша? В Chrome вы можете сделать это, нажав CTRL + SHIFT + R или нажав F12, щелкнув правой кнопкой мыши кнопку обновления и выбрав «Очистить кеш и выполнить жесткую перезагрузку».
И обратите внимание, если присвоить переменной finalcolor, например, #fec23b все работает нормально, так что, скорее всего, с вашей конверсией что-то не так.
Переменная finalcolor зависит от текущего пользователя, но я проверил ее, и она всегда является допустимым шестнадцатеричным числом, например #fec23b.
Вы уверены, что возвращаемое значение rgb2hex() имеет тип string?
Пример в студию.
@ЮрийСветлов Как говорит OP, это работает, когда переменная жестко запрограммирована, нам не нужно видеть класс .zu-default div ... нам нужен образец воспроизводящий, хотя проблема
@ NL97 Я ответил на твой вопрос?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
$('.zu-default div').css("background", finalcolor+' !important');
или
$('.zu-default div').css("background", finalcolor.toString());
это работает?
$('.zu-default div').css("background", 'green');<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "zu-default">
<div style = "width: 10px; height: 10px;"></div>
<div style = "width: 10px; height: 10px;"></div>
<div style = "width: 10px; height: 10px;"></div>
</div>let finalcolor = '#222222';
$('.zu-default div').attr('style', $('.zu-default div').attr('style')+"background: "+finalcolor+";");<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "zu-default">
<div style = "width: 10px; height: 10px;"></div>
<div style = "width: 10px; height: 10px;"></div>
<div style = "width: 10px; height: 10px;"></div>
</div>
Укажите минимальный воспроизводимый пример, воспроизводящий описанную вами проблему.