Не могу изменить другие изображения контейнера с Jquery

Question

Привет, ребята. Я стараюсь сделать файлы ввода более удобными для пользователя, а скрипт, который у меня есть, меняет первое изображение только тогда, когда человек что-то выбирает. Есть идеи как это исправить? Спасибо заранее!

  $(function() {
     $("input:file").on(this).change(function (){
      $(this).parent().find('.empty_input_file').hide();
      $(this).parent().find('.full_input_file').show();
     });
  });

Проверьте пример здесь

Answer 1

Ваш вход имеет одинаковый идентификатор и идентификаторы ** должны быть уникальными *

Пример jsFiddle

<div class="image-upload" title="Select image">
    <label for="file-input1">
        <img class="empty_input_file" src="http://goo.gl/pB9rpQ" />
        <img class="full_input_file" src="http://zqapps.com/DraperDarkFlow/images/Icon-Blue.png" />
    </label>
    <input id="file-input1" type="file" name="d4p_attachment[]">
    <br/>
</div>
<div class="image-upload" title="Select image">
    <label for="file-input2">
        <img class="empty_input_file" src="http://goo.gl/pB9rpQ" />
        <img class="full_input_file" src="http://zqapps.com/DraperDarkFlow/images/Icon-Blue.png" />
    </label>
    <input id="file-input2" type="file" name="d4p_attachment[]">
    <br/>
</div>