Question

我在提交时触发了10个框的不透明度，并且不透明度的值由从表单中提取的值确定。我现在需要做的是让它运行循环，而不是仅分别为每个框分配变量。这是我的代码。

var color;
var count = 0;
var colorOpac = [];

function init() {

    var val1 = document.querySelector('#question1').value; 
    var opacity1 = val1 * 0.1;
    colorOpac.push(opacity1);

    var val2 = document.querySelector('#question2').value;
    var opacity2 = val2 * 0.1;
    colorOpac.push(opacity2);

    var val3 = document.querySelector('#question3').value;
    var opacity3 = val3 * 0.1;
    colorOpac.push(opacity3);

    var val4 = document.querySelector('#question4').value;
    var opacity4 = val4 * 0.1;
    colorOpac.push(opacity4);

    var val5 = document.querySelector('#question5').value;
    var opacity5 = val5 * 0.1;
    colorOpac.push(opacity5);

    var val6 = document.querySelector('#question6').value;
    var opacity6 = val6 * 0.1;
    colorOpac.push(opacity6);

    var val7 = document.querySelector('#question7').value;
    var opacity7 = val7 * 0.1;
    colorOpac.push(opacity7);

    var val8 = document.querySelector('#question8').value;
    var opacity8 = val8 * 0.1;
    colorOpac.push(opacity8);

    var val9 = document.querySelector('#question9').value;
    var opacity9 = val9 * 0.1;
    colorOpac.push(opacity9);

    var val10 = document.querySelector('#question10').value;
    var opacity10 = val10 * 0.1;
    colorOpac.push(opacity10);

    color = document.querySelectorAll(".box"); 
    setInterval(fade, 50);
}

function fade() {
    for(i=0; i <color.length;i++){
    if(count < colorOpac[i]){
        color[i].style.opacity = count;
    }
}
    count = count + 0.01;
}

我发现了一个我认为可行的例子，但它所做的只是拉取值并循环，我需要整合这一行var opacity1 = val1 * 0.1;。这是我找到的例子。

var elems = document.querySelectorAll('input');
var values = [];
for (var i = 0; i < elems.length; i++) {
    values.push(elems[i].value);
}

非常感谢任何帮助。我试过操纵上面的例子与我合作没有成功。谢谢:)）

Answer 1

好吧，我无法让你的小提琴工作，但是：

您可以为每个输入“Answer Input”设置一个类，获取所有输入并按如下方式循环显示：

var answerInputs = document.getElementsByClassName("AnswerInput");

for(i = 0; i< answerInputs.length; i ++)
{
   answerInputs[i] ...
}

Answer 2

再次回答了我自己的问题。摆脱了所有看起来像这样的代码：

var val1 = document.querySelector('#question1').value; 
var opacity1 = val1 * 0.1;
colorOpac.push(opacity1);

并将其浓缩为：

    var inputs = document.querySelectorAll('input');

for(var i = 0; i < inputs.length; i++) {
    colorOpac.push(inputs[i].value * 0.1);
}

不透明度衰减由表格中的值决定。

2 个答案: