Question

首先，我为我可怜的英语道歉，我是法语^^。

我是html，css＆amp; amp;的初学者JS。

对于我的工作，我创建了一个html页面。在这个页面上，有一张图片。当我点击这张图片时，我希望它能够改变（见下文）：

没有点击，图片1。
点击一下，图片2。
双击，图片1。
...

HTML：

<div class="col c1-8">
  <a id="btn4" onclick="toggle(this)" data-on="/trigger/7" data-off="/trigger/8" href="/trigger/8">
    <img src="images/all_logos_2/b_ON-OFF_v1_off.png">
  </a>
</div>

JavaScript的：

function toggle(element) {
  var onLink = element.getAttribute('data-on');
  var offLink = element.getAttribute('data-off');
  if (element.getAttribute("href") == offLink){
    element.setAttribute("href", onLink);
  } else if (element.getAttribute("href") == onLink){
    element.setAttribute("href", offLink);
  }
}

但我不知道如何继续。

提前谢谢你;）

Answer 1

由于几个原因，您的代码无效。

您只是更改了链接的accumarray，而不是图片的href;并且您没有停止点击事件，这意味着只会遵循锚点，尝试在浏览器中加载图像而不是您想要的图像：

src

    function toggle(element) {
      var onLink = element.getAttribute('data-on');
      var offLink = element.getAttribute('data-off');
      var src = element.getAttribute("href"); //new image src
      if (element.getAttribute("href") == offLink){
        element.setAttribute("href", onLink);
      } else if (element.getAttribute("href") == onLink){
        element.setAttribute("href", offLink);
      }
      element.childNodes[1].setAttribute("src", src); //change the "src" attribute of the image.
      event.preventDefault(); //do not follow the link
    }

点击它时更改图片（html，css＆amp; js）

1 个答案: