Simpel图像切换功能将不起作用（没有jQuery）

Question

我一直在试图使这个simpel图像切换点击功能的工作，但我不知道什么是错的。我不得不使用querySelector和addEventListener，也不允许使用jquery。任何人都可以帮我理解一下吗？

document.querySelector(".imageClass").addEventListener("click", function() { 
    var img = this.src; 
    if(img.src == "/image/location1.png") { 
     img.src = "/image/location2.png"; 
    } else { 
     img.src = "/image/location2.png"; 
    } 
}); 

我得到这个错误：

document.querySelector(...).addEventlistener is not a function(...) 

Answer 1

获得一个属性最有可能返回一个绝对URL，你真的要确保您检查属性，而不是财产。

此外，你accesing src两次，第一次做var img = this.src然后通过执行img.src

而且你的病情确实在这两种情况下，同样的事情

document.querySelector(".imageClass").addEventListener("click", function() { 
    var img = this; 
    var src = img.getAttribute('src'); 

    if(src == "/image/location1.png") { 
     img.src = "/image/location2.png"; 
    } else { 
     img.src = "/image/location1.png"; 
    } 
}); 

Answer 2

收到您的事件通过它传递您的参数。从那里你可以访问事件的目标元素并获得它的src属性。

document.querySelector(".imageClass").addEventListener("click", function (e) { 
    var img = e.target; 
    if(img.src == "/image/location1.png") { 
    img.src = "/image/location2.png"; 
    } else { 
    img.src = "/image/location2.png"; 
    } 
});