從輸入文件中獲取課程

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

我的問題：我無法從各元素的類名。點擊第二個元素時，會顯示第一個元素的類名。

Answer 1

HTML元素的ID應該是唯一的（http://www.w3schools.com/tags/att_global_id.asp）。 因此，jQuery無法區分哪兩個都有id「文件」。

編輯：

其實我的第一個答案是錯的，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"/> 

Answer 2

如果你刪除它可以隱藏你輸入的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」