如何在单击时更改图像按钮然后返回答案

【问题标题】：How to change image button on click then get back如何在单击时更改图像按钮然后返回
【发布时间】：2017-12-08 20:19:55
【问题描述】：

我有一个图像按钮，如果我单击 img 按钮，我想这样做，然后如果我再次单击该按钮，它会变回默认图像。

我有这个脚本，但它没有变回来。有人可以帮帮我吗？

<script>
  function VOR2(img) 
  {
    if(img.src.match(/blank/))
    {
      img.src = "VOR.gif";
    }
    else
    {
      img.src = "VOR2.gif";
    }
  }
</script>    
<img src="VOR.gif" id="VOR2" onclick=VOR2

【问题讨论】：

标签： javascript html image button

【解决方案1】：

您的代码当前无法运行的原因是img.src.match(/blank/) 会查看图像源是否包含文本“空白”（正斜杠使其成为regex）。但是，您提供的图片都没有包含文本“空白”，所以它根本什么都不做，而且也不是最好的用例。

对此的最佳做法是将带有classList 的类切换到您的图像，以帮助识别它处于哪个“状态”，如下所示：

<script>
function VOR2(img) {
  isChanged = img.classList.contains('changed-image');
  img.src = isChanged ? 'VOR.gif' : 'VOR2.gif';
  img.classList.toggle('changed-image');
}
</script>    
<img src="VOR.gif" id="VOR2" onclick=VOR2>

我还建议将脚本移到不同的文件中。

【讨论】：

【解决方案2】：

你可以这样做：

JS：

function VOR2(img) {
  if (img.src == "VOR2.gif") {
    img.src = "VOR.gif";
  } else {
    img.src = "VOR2.gif";
  }

  console.log(img.src);
}

HTML：

<img src="VOR.gif" id="VOR2" onclick="VOR2(this)" />

【讨论】：