JavaScript-使用'；如果'；

我使用两种不同的if方法尝试了js图像更改示例

<img id="myImage" onclick="changeImage()" src="s.png">
Click image
<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.getAttribute('src')=='s.png')
       image.src="m.png";
    else
       image.src="s.png";

 }
</script>

---

第二种方法仅在第一次单击时有效。而且，当“如果”部分中比较的图像与其他图像交换时，即使在第一次单击时，它也根本不起作用。有人能给我解释一下，为什么第二个“如果”方法不能正常工作，而第一个“如果”方法工作得很好？

您的代码不能正常工作的原因是web浏览器会自动将站点路径添加到您的图像url，因为您使用的是相对图像url。因此，在每个url中都有“s”字符（因为

s

字母在站点url中）。并且每个

.match（'s'）

都将始终返回true

解决方法就是找到另一个检查当前图像的方法

下面是注销图像src的示例，因此它应该有助于您了解问题：

Html:

---

工作示例：

使用DOM元素的

getAttribute

和

setAttribute

方法<代码>image.setAttribute（'src'，'m.png'）如果使用“image.setAttribute（'src'，'m.png'）”替换“image.src=”m.png'），功能是否会有所不同？事实并非如此。下面有一个工作示例，我知道“if（image.getAttribute（'src'）=='s.png'）”工作得很好。我想知道我在问题中问的是，为什么它在“if（image.src.match（'s'）”时工作得很好“没有。另一个例子是

match

方法：似乎有效

function changeImage(){
   var image = document.getElementById('myImage');
   if (image.src.match("s"))
   {image.src ="m.png";}
   else
    {image.src ="s.png";}  

<img id="myImage" onclick="changeImage();" src="s.png">
Click image

changeImage = function() {
    var image = document.getElementById('myImage');

    if (image.getAttribute('src')=='s.png') {
       image.setAttribute('src', "m.png");
    } else {
       image.setAttribute('src', "s.png");
    }
 }