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"; 
    } 
});