jquery - 根据子元素的 "value"属性编辑元素的样式

标签 jquery css attributes parent-child background-color

我有 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"));

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

最佳答案

  • 在您的示例中,this 并未引用您的 jQuery 对象中的每个元素。您可以遍历对象,或者,因为 .css()为你处理循环,传递一个回调函数作为第二个参数。此函数的上下文将是对象中的每个元素。
  • jQuery 有 .val()获取表单元素的值属性。
$(".color-button").css("background-color", function(){
    return $(this).find('input').val();
});

JSFiddle

关于jquery - 根据子元素的 "value"属性编辑元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28015965/

相关文章:

javascript - 有人在 ios 12.2 上遇到 jquery.on ('change' ) 或 .change() 的任何问题吗?

jquery - 在pushState之后按下后退时如何重新加载页面?

javascript - 如何限制查询函数在循环时运行?

html - CSS 只影响 MAC chrome 浏览器吗?

html - 当浏览器尺寸缩小时 Div 保持换行

c# - 如何从抽象类中的静态方法获取当前类型?

php - 在 php 中使用 ajax 和 jquery 时,数据在数据库中多次输入

jquery - 使用 NicEditor 调整窗口大小

jquery - 使用jquery向嵌入标签添加属性

c# - 如何在 ashx 文件上运行自定义 System.Attribute