时间戳

首页 > 解决方案 > 使用 querySelectorAll 动态更改输入值

javascript - 使用 querySelectorAll 动态更改输入值

问题描述

我有多个颜色输入（总共 16 个），我通过使用 adiv作为包装器来设置它们的样式。包装器 divcolor-wrapper本质上是我的颜色输入。

<ul class="color-picker__list">
          <li>
            <div class="color-wrapper">
              <input id="highlight-background" type="color" value="#F7EBC6">
              <label for="highlight-background">Highlight Background</label>
            </div>
          </li>
          <li>
            <div class="color-wrapper">
              <input id="highlight-accent" type="color" value="#F7D87C">
              <label for="highlight-accent">Highlight Accent</label>
            </div>
          </li>
</ul>

预期目标

每个包装器div都应将其背景颜色设置为其包装的颜色输入的值。更改输入时，背景颜色应更改为所选颜色。

当前的意外结果

每个颜色输入当前都是黑色的，初始值为#00000。当我改变颜色时，什么也没有发生。

我尝试过的

我抓住了所有输入和color-wrapper's 并使用嵌套循环它们，forEach以便我可以迭代两者并将背景颜色设置为color-wrapper颜色输入的值。

const colorWrappers = [].slice.call(document.querySelectorAll('.color-wrapper'))
const inputs = [].slice.call(document.querySelectorAll('input[type="color"]'))

colorWrappers.forEach(wrapper => {
  inputs.forEach(input => {
    wrapper.style.backgroundColor = input.value
  })
})

我只在使用 选择单个颜色时才成功querySelector，但我需要能够动态更改所有 16 种颜色输入。

输入和包装 CSS

input[type="color"] {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.color-wrapper {
  display: flex;
  height: 35px;
  max-width: 50px;

  border-radius: 3px;
  position: relative;
  height: 30px;
  width: 30px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

标签： javascriptcss

解决方案

这对我有用：

获取所有输入元素，循环它们，将更改事件添加到每个元素，并将其颜色设置为他的父元素。

Javascript：

var inputs = document.querySelectorAll('.color-wrapper input');
inputs.forEach(function(element){
    element.addEventListener("change", function () {
        element.parentNode.style.background = element.value;
    });
})

推荐阅读