根据＆＃34;值＆＃34;编辑元素的样式;其子元素的属性

Question

我有input个元素嵌套在label个元素中，如下所示：

<label class="color-button">
    <input type="color" value="#012345">
</label>
<label class="color-button">
    <input type="color" value="#6789AB">
</label>
<label class="color-button">
    <input type="color" value="#CDEF01">
</label>
...

现在我想给每个label孩子background-color指定的value。我想出了这个jQuery代码：

$(".color-button").css("background-color", this.children().attr("value"));

但这似乎并没有成功。有什么想法吗？

Answer 1

• 在您的示例中，this没有引用jQuery对象中的每个元素。您可以循环访问该对象，或者由于.css()为您处理循环，因此将回调函数作为第二个参数传递。该函数的上下文将是对象中的每个元素。
• jQuery有.val()来获取表单元素的value属性。

$(".color-button").css("background-color", function(){
    return $(this).find('input').val();
});

JSFiddle