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

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

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

2 个答案: