Question

我有一个输入数组，使用for循环遍历它们后，是否可以将每个值存储到变量中？

这是我要专门做的事情：我正在构建渐变背景生成器。我总共有6个输入（rgb代表渐变的第一种颜色，rgb代表第二个颜色）。我遍历输入数组，然后将每个值存储到变量（r，g，b，r2，g2，{{1} }），然后在线性渐变css中使用它们。

我的方法似乎不太实用，所以我想知道是否可以将所有b2值“自动”存储到变量中。

input[i]

const inputs = document.querySelectorAll('input')
const body = document.body;

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', changeValue);
  inputs[i].addEventListener('mousemove', changeValue);

  function changeValue() {
    let r = inputs[0].value;
    let g = inputs[1].value;
    let b = inputs[2].value;
    let rgb = r + ',' + g + ',' + b;

    let r2 = inputs[3].value;
    let g2 = inputs[4].value;
    let b2 = inputs[5].value;
    let rgb2 = r2 + ',' + g2 + ',' + b2;

    body.style.backgroundImage = `linear-gradient(45deg, rgb(${rgb}), rgb(${rgb2}))`;
  };
}

Answer 1

您可以使用Array.prototype.forEach和Array.prototype.slice删除所有的for循环。

我还为EventTarget.prototype.addEventListeners创建了一个自定义shiv（又名polyfill）。

EventTarget.prototype.addEventListeners = function(eventNames, listener) {
  eventNames.split(' ').forEach(event => this.addEventListener(event, listener, false))
}

const inputs = document.querySelectorAll('input')

inputs.forEach(input => input.addEventListeners('change mousemove', onChangeValue))

function onChangeValue() {
  let rgb1 = [].slice.call(inputs, 0, 3).map(x => x.value).join(',')
  let rgb2 = [].slice.call(inputs, 3, 6).map(x => x.value).join(',')
  document.body.style.backgroundImage = `linear-gradient(45deg, rgb(${rgb1}), rgb(${rgb2}))`;
};

<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">

您还可以尝试按类对组件进行分组。

EventTarget.prototype.addEventListeners = function(events, listener) {
  events.split(' ').forEach(event => this.addEventListener(event, listener, false));
}

document.querySelectorAll('.color-slider-channel').forEach(input => {
  input.addEventListeners('change mousemove', onChangeValue);
})

function onChangeValue(e) {
  document.body.style.backgroundImage = `linear-gradient(45deg, ${retrieveGradientStops()})`;
};

function retrieveGradientStops() {
  return [...document.querySelectorAll('.color-slider-rgb')].map(s => {
    return 'rgb(' + [...s.querySelectorAll('.color-slider-channel')].map(c => c.value).join(',') + ')';
  }).join(', ');
}

<div class="color-sliders">
  <div class="color-slider-rgb">
    <input type="range" class="color-slider-channel" min="0" max="255">
    <input type="range" class="color-slider-channel" min="0" max="255">
    <input type="range" class="color-slider-channel" min="0" max="255">
  </div>
  <div class="color-slider-rgb">
    <input type="range" class="color-slider-channel" min="0" max="255">
    <input type="range" class="color-slider-channel" min="0" max="255">
    <input type="range" class="color-slider-channel" min="0" max="255">
  </div>
</div>

Answer 2

如果您使用的是ES6，则可以使用destructuring assignment。

您将执行以下操作：

let [r, g, b, r2, g2, b2] = Array.from(inputs).map((x) => x.value);

示例：

const arr = [234,124,233, 25,233,21]

let [r, g, b, r2, g2, b2] = arr;

console.log(r, g, b)
console.log(r2, g2, b2)

Answer 3

您可以使用Array destructuring来简化代码：

const inputs = [...document.querySelectorAll('input')];
const body = document.body;

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', changeValue);
  inputs[i].addEventListener('mousemove', changeValue);

  function changeValue() {
    let [r, g, b, r2, g2, b2] = inputs.map((x) => x.value);

    let rgb = r + ',' + g + ',' + b;
    let rgb2 = r2 + ',' + g2 + ',' + b2;

    body.style.backgroundImage = `linear-gradient(45deg, rgb(${rgb}), rgb(${rgb2}))`;
  };
}

<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">

<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">

Answer 4

您可以通过其id获取值。

function changeValue() {
    const mapId = id => document.getElementById(id).value || 0;
    var [rgb, rgb2] = inputs.map(groups => groups.map(mapId).join(','));

    document.body.style.backgroundImage = `linear-gradient(45deg, rgb(${rgb}), rgb(${rgb2}))`;
}

var inputs = [['r1', 'g1', 'b2'], ['r2', 'g2', 'b2']];

inputs.forEach(group => group.forEach(id => {
    document.getElementById(id).addEventListener('change', changeValue);
    document.getElementById(id).addEventListener('mousemove', changeValue);
}));

<input id="r1" type="range" min="0" max="255">
<input id="g1" type="range" min="0" max="255">
<input id="b1" type="range" min="0" max="255"><br>
<input id="r2" type="range" min="0" max="255">
<input id="g2" type="range" min="0" max="255">
<input id="b2" type="range" min="0" max="255">

将数组存储到Javascript中的变量中

4 个答案: