时间戳

首页 > 解决方案 > 无法使用 JavaScript 交换 href

javascript - 无法使用 JavaScript 交换 href

问题描述

此代码用于更改 href 的值，我可以确认，因为警报按预期交替确认。然而，<image>是不变的。问题是什么？

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
function toggleImage() {
  if (this.href == onImg) {
    alert('turning off');
    this.href = offImg;
  } else {
    alert('turning on');
    this.href = onImg;
  }
}
<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg" onclick="toggleImage()"/>
    </svg>
  </li>
</ul>

标签： javascripthtmlcsssvg

解决方案

一些东西：

  • 首先，您为图像设置一个 clipPath，而不定义它，这将阻止 click 事件至少在 Firefox 中触发您的图像。
  • 然后将事件处理程序附加为事件属性，this不会以这种方式传递，您必须自己从事件处理程序传递它。
  • 最后，SVGImageElement.href是一个SVGAnimatedString，而不是一个字符串。如果要检索或编辑它，则需要获取或设置其.baseVal值：

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
function toggleImage(img) {
  if (img.href.baseVal == onImg) {
    alert('turning off');
    img.href.baseVal = offImg;
  } else {
    alert('turning on');
    img.href.baseVal = onImg;
  }
}
<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg" onclick="toggleImage(this)"/>
    </svg>
  </li>
</ul>

或者您可以简单地设置属性，并使用正确的事件处理程序：

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
document.querySelector("image").addEventListener("click",  function toggleImage(evt) {
  const current_value = this.getAttribute("href");
  if (current_value == onImg) {
    alert('turning off');
    this.setAttribute("href", offImg);
  } else {
    alert('turning on');
    this.setAttribute("href", onImg);
  }
});
<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg"/>
    </svg>
  </li>
</ul>

推荐阅读