javascript - javascript 循环（使用 foreach 或 each）

Question

这段代码可以在javascript中变成循环吗？感谢您帮助我学习 javascript！

html:

<div class="uploadBox"><input id="files3" class="upload" style="position:absolute;" placeholder="Upload Photo"/><input type="file" style="position:absolute;width:200px;height:44px;opacity:0;" id="selector3"/></div>
<div id="checkBox3" class="checkBox"><img src="images/check.png"></div>

javascript:

document.getElementById("selector1").addEventListener("change",function(){
    document.getElementById("files1").value=
        document.getElementById("selector1").files[0].name;
    $('#checkBox1').css({'display': 'block'});
});

document.getElementById("selector2").addEventListener("change",function(){
    document.getElementById("files2").value=
        document.getElementById("selector2").files[0].name;
    $('#checkBox2').css({'display': 'block'});
});

document.getElementById("selector3").addEventListener("change",function(){
    document.getElementById("files3").value=
        document.getElementById("selector3").files[0].name;
    $('#checkBox3').css({'display': 'block'});
});

Answer 1

你的意思是这样的？

for (i = 1; i < 4; i++) {
    document.getElementById("selector" + i).addEventListener("change",function(){
        document.getElementById("files" + i).value=
            document.getElementById("selector" +i).files[0].name;
        $('#checkBox' + i).css({'display': 'block'});
    });
}

Answer 2

//我用了 3 你可以给你想要的次数

for ( var i = 1; i < 3; i++ ) {
    document.getElementById("selector"+i.toString()).addEventListener("change",function(){
    document.getElementById("files"+i.toString()).value=
        document.getElementById("selector"+i.toString()).files[0].name;
    $('#checkBox'+i.toString()).css({'display': 'block'});
});
}

Answer 3

尝试这个：

$('input[id^=selector]').each(function(){
    this.parent().next('div[class="checkBox"]').css({'display': 'block'});
    this.prev().val(this.files[0].name);
});

Answer 4

非常基本：使用循环的索引来连接选择器（不要忘记闭包！）。

并且最好不要混淆 jQuery 和 JavaScript 以获得更高的可读性：

var n = 3
for (var i = 1; i <= n; i++) {
    $("selector" + i).on("change", (function (i) {
        return function () {
            $("files" + i).val($("selector" + i).get(0).files[0].name);
            $("#checkBox" + i).css({
                "display": "block"
            });
        }
    })(i));
}