javascript 循环（使用 foreach 或 each）答案

【问题标题】：javascript looping (use foreach or each)javascript 循环（使用 foreach 或 each）
【发布时间】：2013-10-11 06:53:52
【问题描述】：

这段代码可以在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'});
});

【问题讨论】：

我们还需要查看您的 html 代码。您的代码中有 jQuery，jQUery 也有一个 .each() 方法...
@Sergio 我添加了我的 html！感谢回复
这 2 个 div 是否有父 div？

标签： javascript loops foreach jquery

【解决方案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'});
    });
}

【讨论】：

我只是在写同样的答案
在我的代码中，当我选择文件后，它会在输入框中显示文件名，但这并没有在输入框中显示文件名

【解决方案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'});
});
}

【讨论】：

在代码中，当我选择文件后，它会在输入框中显示文件名，但这并没有在输入框中显示文件名

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案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));
}

【讨论】：

在我的代码中，当我选择文件后，它会在输入框中显示文件名，但这并没有在输入框中显示文件名