Question

我试图用循环来填充一些javascript - 但我不确定我在循环中更改变量名和函数名的语法。只是调整过去有用的东西，但也许不像我应该那样理解它？

这是我到目前为止所做的：

var sliderstorage=0;

for (var l = 0; l < ul.children.length; l++)
    {
    var Q = l+1;
    var Num = Q.toString();
    var string = "img" + Num;
    var change = string + "changeftot";

    var [string] = document.getElementById("[string]");
    console.log([string]);

    [string].addEventListener("click",[change]);


        function [change](e)
        {
            sliderstorage = e.target.value;
            console.log(sliderstorage);
            document.form1.Q11.value = sliderstorage;
        }
    };

这就是我想要实现的目标（此代码定义可行）：

我添加了html以使其更清晰。

<div id="foo" class="block__list block__list_words" style="height: 100%">

<!--Add images here (change id and value)-->

     <div id="1"><input type="image"  id="img1" value="1" src="<#ImageFolder>\Q8_1.jpg"><br><br></div>

     <div id="2"><input type="image"  id="img2" value="2" src="<#ImageFolder>\Q8_2.jpg"><br><br></div>

    <div id="3"><input type="image"  id="img3" value="3" src="<#ImageFolder>\Q8_3.jpg"><br><br></div>

    <div id="4"><input type="image" id="img4" value="4" src="<#ImageFolder>\Q8_4.jpg"><br><br></div>        
</div>


<script>
// Enable to randomise, comment out to always show in same order

var ul = document.getElementById("foo");
for (var i = ul.children.length; i >= 0; i--)
ul.appendChild(ul.children[Math.random() * i | 0]);

//this is where the code I'm trying to neaten up starts:

var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var img4 = document.getElementById("img4");

var sliderstorage=0;

img1.addEventListener("click",img1changeftot);
img2.addEventListener("click",img2changeftot);
img3.addEventListener("click",img3changeftot);
img4.addEventListener("click",img4changeftot);

    function img1changeftot(e)
    {
        sliderstorage = e.target.value;
        console.log(sliderstorage);
                 document.form1.Q11.value = sliderstorage;
    }

    function img2changeftot(e)
    {
        sliderstorage = e.target.value;
        console.log(sliderstorage);
                document.form1.Q11.value = sliderstorage;
    }

    function img3changeftot(e)
    {
        sliderstorage = e.target.value;
        console.log(sliderstorage);
                document.form1.Q11.value = sliderstorage;
    }

    function img4changeftot(e)
    {
        sliderstorage = e.target.value;
        console.log(sliderstorage);
                document.form1.Q11.value = sliderstorage;
    }

任何帮助和输入，非常感谢！：）

Answer 1

为什么不这样做：

document.getElementById("foo").addEventListener("click", function(e){
   if(e.target.type=="image") document.form1.Q11.value = e.target.value;
});

Answer 2

您可以将事件侦听器添加到如下所示的项目类型中。在您的情况下获取页面上的所有输入。然后检查输入类型是否为image，如果它是向其添加事件监听器。

var sliderstorage = 0

//create your function outside of the loop 
//so its not recreated in each iteration of the loop
function changeftot(e) {
    sliderstorage = e.target.value;
    console.log(sliderstorage);
    document.form1.Q11.value = sliderstorage;
}

var inputs =document.getElementById('foo').getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'image') {
        inputs[i].addEventListener('click', changeftot)
    }
};

更改循环中的函数名称

2 个答案: