JavaScript 单击事件无法使用 addEventListener 处理相同的 class 名称

Question

I am developing a simple drag and drop image upload option.我正在开发一个简单的拖放图像上传选项。

When I drag the image on the drag area it's showing me the uploaded image.当我在拖动区域上拖动图像时，它会向我显示上传的图像。 That's good.那挺好的。 Now, I drag multiple images at a time.现在，我一次拖动多个图像。

Using this JavaScript code I am Uploading Image:使用此 JavaScript 代码我正在上传图片：

function uploadFile(files) {

    let url = 'process.php'
    let formData = new FormData();
    let allowedExt = ['jpg', 'jpeg', 'png', 'gif'];

    for (const [key, value] of Object.entries(files)) {
        let extension = value.name.split(".").pop();
        if (allowedExt.includes(extension) == false) {
            alert('Invalid file formate, we are only accepting ' + allowedExt.join(", ") + ' file formates');
            return false;
        }
        formData.append('files[]', value);
        previewFile(value, value.name);
    }

    fetch(url, {
        method: 'POST',
        body: formData,
    })
    .then((data) => {
        console.log('Success');
    })
    .catch((error) => {
        console.log(error);
    })

}

For previewing the Image用于预览图像

function previewFile(file, fileName) {
    let reader = new FileReader();
    reader.readAsDataURL(file); 

    console.log( reader );      

    reader.onload = function () {
        let html = '';
        html += '<div class="col-md-4"><div class="item" id="item"><img src="' + reader.result + '" alt="" class="img-fluid filter-me"><span>' + fileName + '</span></div></div>';
        loadImage.innerHTML += html;
        
        

        
        // let filterMe = document.querySelector('.filter-me').src;
        // console.log(filterMe);
        // for( let i =0; i < filterMe.length; i++) {
        //  console.log( filterMe[i]);
        //  // filterMe[i].addEventListener( 'click', function () {                     
        //  //  console.log( this );
        //  //  localStorage.setItem("imgData", this.src);          
        //  // });
        // }        
        
    }   

    reader.onloadend = function () {
        let filterMe =  document.querySelector(".filter-me");
        filterMe.addEventListener("click", function () {            
            console.log( this );
        });
    }
    
}

Now, on this function you can see I want to see this this value using console.log( this );现在，在这个 function 上，你可以看到我想使用console.log( this ); this

But it's showing me first upload image this value not other images when I click on other images:(但是当我点击其他图像时，它显示我首先上传图像this值而不是其他图像:(

Is there anything I am wrong and how can I do this?有什么我错了，我该怎么做？
Is there any better code to achive this?有没有更好的代码来实现这一点？

Answer 1

querySelector returns only the first element of the selector type. querySelector只返回选择器类型的第一个元素。 so i would say that it is behaving correctly.所以我会说它的行为正确。 You're applying the click event only to the first element.您仅将 click 事件应用于第一个元素。

You eventually want to use querySelectorAll and then cycle through all the elements.您最终希望使用querySelectorAll然后循环遍历所有元素。

 let filterMe = document.querySelectorAll(".filter-me"); if (filterMe) { for(const x of filterMe) { x.addEventListener('click', function() { console.log('image', this.src); }); } }

 <html> <body> <img class="filter-me" src="img1.jpg" /> <img class="filter-me" src="img2.jpg" /> <img class="filter-me" src="img3.jpg" /> </body> </html>

Answer 2

The main problem is that you are using document.querySelector(".filter-me");主要问题是您正在使用document.querySelector(".filter-me"); , which returns the first element that matches the selector .filter-me ，它返回匹配选择器.filter-me的第一个元素

You need to use document.querySelectorAll(".filter-me");您需要使用document.querySelectorAll(".filter-me"); which will return a nodeList of all elements that match.这将返回所有匹配元素的节点列表。

Then you can iterate through them adding your event listener, something like:然后您可以遍历它们添加您的事件侦听器，例如：

const filterElements = document.querySelectorAll(".filter-me");
filterElements.forEach(function(filterMe){
   // do your stuff
})

The problem here is if you then drop another image you will add more listeners to the first lot.这里的问题是，如果您随后删除另一个图像，您将在第一批中添加更多听众。 So you will need to identify the ones that you have already added listeners to, for instance by adding a class filterMe.classList.add('listener-added') .因此，您需要识别已添加侦听器的那些，例如通过添加 class filterMe.classList.add('listener-added') 。 Then all you have to do is make sure that they don't get selected, so change the selector to .filter-me:not(.listener-added)然后你要做的就是确保它们没有被选中，所以将选择器更改为.filter-me:not(.listener-added)

JavaScript 单击事件无法使用 addEventListener 处理相同的 class 名称

问题描述

2 个解决方案

解决方案1
3 已采纳 2020-07-19 05:40:50

解决方案2
0 2020-07-19 05:47:47

JavaScript 单击事件无法使用 addEventListener 处理相同的 class 名称

问题描述

2 个解决方案

解决方案1 3 已采纳 2020-07-19 05:40:50

解决方案2 0 2020-07-19 05:47:47

解决方案1
3 已采纳 2020-07-19 05:40:50

解决方案2
0 2020-07-19 05:47:47