クラスの複数のイベントリスナー

Question

複数のドラッグアンドドロップ領域を作成しようとしています。 「ドロップゾーン」クラスのリスナーを追加しようとしています（このクラスのすべての要素の場合は）。

var dropZone = document.getElementById('some_area'); // ok 
// var dropZone = document.getElementByClassName('drop-zone'); // not working 

dropZone.addEventListener('dragover', function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    e.dataTransfer.dropEffect = 'copy'; 
}); 

dropZone.addEventListener('drop', function(e) { 
    var target_img = $(this).find('img'); 
    e.stopPropagation(); 
    e.preventDefault(); 
    var files = e.dataTransfer.files; // Array of all files 
    for (var i=0, file; file=files[i]; i++) { 
     if (file.type.match(/image.*/)) { 
      var reader = new FileReader(); 
      reader.onload = function(e2) { // finished reading file data. 
       var img = document.createElement('img'); 
       img.src= e2.target.result; 
       target_img.attr('src',e2.target.result); 
       target_img.addClass('full-preview'); 
      } 
      reader.readAsDataURL(file); // start reading the file data. 
} } }); 

Answer 1

特定のクラスを持つすべての要素を照会する必要があります。

// Returns a list of the elements within the document 
// that match the specified 'drop-zone' class. 
var dropZones = document.querySelectorAll('.drop-zone'); 


for (var i = 0; i < dropZones.length; i++) { 
    // Add the event listeners for each element of the list. 
    dropZones[i].addEventListener('dragover', function (e) { 
    // ... 
    }); 

dropZones[i].addEventListener('drop', function (e) { 
    // ... 
}); 
}