jquery - 为什么隐藏文件输入时选择错误？

Question

我 100% 确定这段代码可以工作，但在一种特殊情况下它会失败 - 花了一个小时才找到该错误(无法在 JSFiddle 上重现它)。终于找到原因了，但是不知道为什么会出现这种情况。仅当我隐藏文件输入时才会发生这种情况，结果是:选择并更改了我更改的第一个标签的文件，请看一下:

var activateFileSelection = function( container ) {
    var container = container || $('body');
    container.find(':file').each(function(i) {
        var thisInput = $(this);
        var thisLabel = thisInput.siblings('label');
        if (thisLabel.length > 0 && !thisLabel.hasClass('file-input-label')) {
            var thisLabelDefaultText = thisLabel.html();
            thisLabel.addClass('file-input-label');
            thisInput.on('change', function(e) {
                if (thisInput.val()) {
                    thisLabel.html(thisInput.val());
                } else {
                    thisLabel.html(thisLabelDefaultText);
                };
            });
        };
    });
};
activateFileSelection();

input {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label for="myfile">select 1</label>
    <input id="myfile" type="file" />
</div>
<div>
    <label for="myfile">select 2</label>
    <input id="myfile" type="file" />
</div>
<div>
    <label for="myfile">select 3</label>
    <input id="myfile" type="file" />
</div>

同时在 JSFiddle .

如果输入未隐藏，则一切正常:fiddle .

如nevermind如下所述，重复的输入 ID 可能存在问题，但仍在脚本中我没有解决和 ID。另外，每个文件输入的变化都会触发标签文本的变化，但是错误的。

Answer 1

HTML 代码的布局可能表明每个标签都链接到其旁边的输入字段，但事实并非如此。由于三个标签的 for 属性是 "myfile"，因此所有三个标签实际上都链接到第一个输入字段，即通过 document 找到的输入字段.getElementById("myfile").

因此，当您单击任何标签时，将使用第一个输入字段。通过代码中的 thisInput.siblings('label') 获取的相邻标签会在文件选择后更新。即使 3 个输入字段可见也是如此。

另一方面，如果直接单击输入字段，则会使用该输入字段并更新相应的标签。

以下代码片段向控制台发送一条消息，以指示使用哪个文件输入。

var activateFileSelection = function (container) {
    var container = container || $('body');
    container.find(':file').each(function (i) {
        var thisInput = $(this);
        var thisLabel = thisInput.siblings('label');
        if (thisLabel.length > 0 && !thisLabel.hasClass('file-input-label')) {
            var thisLabelDefaultText = thisLabel.html();
            thisLabel.addClass('file-input-label');
            thisInput.on('change', function (e) {
                console.log("Input used: " + thisInput.data("field"));
                if (thisInput.val()) {
                    thisLabel.html(thisInput.val());
                } else {
                    thisLabel.html(thisLabelDefaultText);
                };
            });
        };
    });
};
activateFileSelection();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test by clicking on label 3 vs clicking on input field 3:</p>
<div>
    <label for="myfile">select 1</label>
    <input id="myfile" type="file" data-field="input1" />
</div>
<div>
    <label for="myfile">select 2</label>
    <input id="myfile" type="file" data-field="input2" />
</div>
<div>
    <label for="myfile">select 3</label>
    <input id="myfile" type="file" data-field="input3" />
</div>