Question

我有一个图像按钮，我想这样做，如果我点击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

Answer 1

你可以这样做：

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)" />

Answer 2

您的代码当前不起作用的原因是因为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 个答案: