получить класс из входного файла

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 должны быть уникальными (http://www.w3schools.com/tags/att_global_id.asp). Поэтому jQuery не может различать ваши элементы, у которых есть id-файл.

EDIT:

На самом деле мой первый ответ был неправильным, 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"/> 

ПРИМЕЧАНИЕ. Недействительно HTML иметь несколько элементов с одинаковым идентификатором. В приведенных выше примерах я изменил идентификатор на втором входе на «file2»