根据 child 元素的 "value" 属性编辑元素的样式

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 指定其 child 的 value 的 background-color。我想出了这个 jQuery 代码：

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

但这似乎并不能解决问题。有什么想法吗？

Answer 1

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

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

JSFiddle