javascript - 使用名称属性为 div 添加颜色

Question

下面目前为两个 div 提供红色 css，我想为每个 div 唯一地更改颜色。

<div class="foo" name="red">red</div>
<div class="foo" name="blue">blue</div>

<script type="text/javascript">

 $('.foo').each(function() {
   var color = $('.foo').attr('name');
   $(this).css('color',color);
 });

</script>

Answer 1

尝试这个：

$('.foo').each(function() {
    var color = $(this).attr('name');
    $(this).css('color',color);
});

Answer 2

我建议如下：

$('.foo').css('color', function() {
    return this.getAttribute('name');
});

JS 小提琴演示。

传递给的匿名函数css()迭代选择器返回的每个元素，因此this在每种情况下都指向当前迭代的元素。

注意 的使用getAttribute('name')，这是因为div没有name属性（属性无效，在input, select,button等...元素之外）。

在这种情况下，我还建议使用自定义data-*属性来存储颜色，例如：

<div class="foo" data-color="red">red</div>
<div class="foo" data-color="blue">blue</div>

并使用 jQuery：

$('.foo').css('color', function() {
    return $(this).data('color');
});

JS 小提琴演示。

参考：

• css().
• data().

Answer 3

我认为它选择了第一个 foo 元素。

您应该尝试使用选择器 $(this)

Answer 4

我认为这就是你想要的......请清理代码..

<div class="foo" name="blue">Hola</div>

<div class="foo" name="red">Hello</div>

<script type="text/javascript">

$("div").each(function() {
var color = $('.foo').attr('name');
document.write("color got is: "+color);
color=$(this).attr('name');
$(this).css('background-color',color);

document.write("   now color is: "+color)