Question

简单的图像切换功能不起作用（没有 jQuery）

2016-11-02

49

javascript html css

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

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