同じ名前の2つの入力フィールド - 変更イベントの場合

Question

同じ名前の2つの入力フィールドがあります。これはプロジェクトのビジネスロジックによるものです。

彼らはそのように見える：私はこれらの2つの入力間の違いを確認する方法を、このように変更event.But上の入力フィールドの後に画像名を追加する必要が

<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> 
 
<input type="file" name="director_front_passport[]" class="app-file" />

？

私はそれらをid attrで区別しようと考えましたが、フィールドを追加するのにcloneボタンがありますが、これは変更イベントでは機能しません。

更新：変更イベントのための私のコードは以下の通りです：

var inputs = document.querySelectorAll('.app-file'); 
 
Array.prototype.forEach.call(inputs, function(input) 
 
{ 
 
    input.addEventListener('change', function(e) 
 
    { 
 
    //my code for displaying image 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

私が変更された入力を見つけること$(this)を使って自分のコードを更新し、自分のコードが見えます：

var inputs = document.querySelectorAll('.app-file'); 
 

 
     Array.prototype.forEach.call(inputs, function(input) 
 
     { 
 
      input.addEventListener('change', function(e) 
 
      { 
 
       var changed = $(this); 
 
       var label \t = changed.next(), 
 
        labelVal = label.innerHTML, 
 
        divName = label.next(); 
 
       fileName = e.target.value.split('\\').pop(); 
 
       divName.html(fileName); 
 
       
 
      }); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> 
 
<input type="file" name="director_front_passport[]" class="app-file" />

を

Answer 1

イベントハンドラ内でthisキーワードを使用すると、イベントを発生させた要素を識別できます。それはあなたがしているようにしforEachを呼び出すために少し奇妙だあなたの第二の例では

$('.app-file').change(function() { 
 
    $(this).after('<div>' + this.files[0].name + '</div>'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> 
 
<input type="file" name="director_front_passport[]" class="app-file" />

：これを試してみてください。あなたはこのように、返さquerySelectorAllからノードリストに存在forEachを呼び出すことができます。

document.querySelectorAll('.app-file').forEach(function(input) { 
    input.addEventListener('change', function(e) { 
     // my code for displaying image 
    }) 
}