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

これを試して：

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

Answer 3

非常に基本的です: ループのインデックスを使用してセレクターを連結します (クロージャーを忘れないでください!)。

また、読みやすくするために、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));
}

Answer 4

// i have used 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'});
});
}