Question

我正在做一本联系簿，我遇到了问题。

代码：

<label for="file">A picture </label><br>
<label for="file">Another picture </label>

<input type="file" id="file" class="1"/>
<input type="file" id="file" class="2"/>

$('input:file').change(function(){
alert(this.className)
})

JSFIDDLE

我的问题 ：我无法从每个元素中获取类名。当点击第二个元素时，第一个元素＆＃39;显示了classname。

Answer 1

如果你删除隐藏输入的css，你会发现它工作得很好。你会明白为什么......当输入被隐藏时，你点击标签而不是输入，并且两个标签都出现在第一个输入之前。所以你总是选择第一个输入，而不是第二个输入。

Updated Fiddle

要解决此问题，请在输入周围包裹标签，如下所示：

<label for="file">A picture <input type="file" id="file" class="1"/></label>
<br />
<label for="file2">Another picture <input type="file" id="file2" class="2"/></label>

或在输入之前输入第二个输入的标签，如下所示：

<label for="file">A picture </label>
<input type="file" id="file" class="1"/>
<br />
<label for="file2">Another picture </label>
<input type="file" id="file2" class="2"/>

注意：具有相同ID的多个元素不是有效的HTML。在上面的示例中，我将第二个输入的ID更改为“file2”

Answer 2

HTML元素的ID应该是唯一的（http://www.w3schools.com/tags/att_global_id.asp）。 ~~因此，jQuery无法区分具有id“file”的元素。~~

编辑：

实际上我的第一个答案是错的，jQuery可以区分，但两个标签都分配给第一个元素。 Updated Fiddle

<label for="file1">A picture </label><br>
<label for="file2">Another picture </label>

<input type="file" id="file1" class="1"/>
<input type="file" id="file2" class="2"/>

从输入文件中获取类

2 个答案: