Элементы стиля в соответствии со значением атрибута в JavaScript - PullRequest
Новая
       3

Элементы стиля в соответствии со значением атрибута в JavaScript

0 голосов
/ 20 марта 2012

Я планирую использовать тот же файл XHTML5 для хранения данных и отображения.Во время разработки файл будет просмотрен в браузере.Во время компиляции он будет проанализирован для генерации содержимого пользовательского интерфейса.

Я хочу сохранить данные о цвете как атрибут некоторых элементов списка.Затем, когда страница загружена, данные о цвете из каждого из этих элементов списка должны быть «перенесены» на цвет фона элемента, чтобы я мог визуально проверить цвета в браузере и легко разобрать шестнадцатеричную строку.из XHTML.

То, что у меня уже есть (только одна строка каждой части): 

(...)
<body>
    <ul>
        <li data-color="#ffeeaacc">EMG</li>
    </ul>
    <script>
        $('a[data-color]').??????
    </script>
</body>

Я очень n00b в javascript и Jquery, и не могу понять, что мне делатьотныне.Конечный результат должен быть эквивалентен:

<li data-color="#ffeeaac" style="background: #ffeeaacc">EMG</li>

Спасибо!

Ответы [ 5 ]

4 голосов
/ 20 марта 2012

#ffeeaacc не является допустимым цветом HEX.HEX цвета содержат только три пары двузначных чисел, а не четыре.

http://jsfiddle.net/CQqRX/1/

$('*[data-color]').each(function(i, e){
    $(e).css('background-color', $(e).data('color'));
});
1 голос
/ 20 марта 2012

Это должно хорошо работать для вас http://jsfiddle.net/zrARP/

$('li[data-color]').each(function (){
    var color = $(this).data("color");
    $(this).css('background-color',color);
})​
1 голос
/ 20 марта 2012

cВы должны использовать что-то вроде этого: 

jQuery('li[data-color]').each(function() {
    jQuery(this).css({'background-color':jQuery(this).data('color')});
});

Вы должны будете использовать это после загрузки DOM

1 голос
/ 20 марта 2012

Это должно работать: 

$('li[data-color]').each(function() {
  $(this).css('background-color', $(this).attr('data-color'));
});
0 голосов
/ 20 марта 2012

Все ранее предоставленные ответы основаны на двух вещах:

  • В элементе списка должен быть указан атрибут data-color=""
  • Все элементы списка должны иметь цвет, если они имеютатрибут

Эта скрипка: http://jsfiddle.net/pratik136/Jt3dX/ демонстрирует

  • , как можно выборочно получать только группу элементов списка, окрашенных цветом, установив class="color-this-list" вконтейнер, внутри которого вы хотите, чтобы элементы списка были окрашены
  • , как вы можете установить цвет по умолчанию для элементов списка без атрибута data-color
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...