javascript - Simpel 图像切换功能不起作用(没有 jQuery)

Question

我一直在尝试让这个简单的图像切换点击功能起作用，但我不确定哪里出了问题。我必须使用 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，而您确实要确保检查的是属性，而不是属性。

此外，您要访问 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";
    }
});