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));
}

循环javascript（使用foreach或者每个）

4 个答案: