jquery - 根据子元素的 "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 background-color 由它的 child 的 value 指定。我想到了这个 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