JavaScript - 使用'if'更改onclick图像

I tried js image changing example using two different if methods.

我使用两种不同的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>

Above method works totally fine no matter how many times clicked on the image or no matter which image is compared inside the 'if' part.

无论点击图像多少次或无论在“if”部分内比较哪个图像,上述方法都可以完全正常工作。

But below method which is given in w3c doesn't work as expected.

但是在w3c中给出的下面的方法不能按预期工作。

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

This second method works only at first click. And also when the image compared inside the 'if' part is swapped with other image, it doesn't work at all even at the first click. Can someone please explain me, why second 'if' method doesn't work properly while first 'if' method works finely?

第二种方法仅在第一次点击时起作用。而且当'if'部分内部比较的图像与其他图像交换时,即使在第一次点击时也不起作用。有人可以解释一下,为什么第二个'if'方法在第一个'if'方法工作正常时不能正常工作?

1 个解决方案

#1

The reason why your code is not working is that web browser automatically adds site path to your image url because you are using relative image url. So you will have 's' character in every url (because s letter is in site url). And every .match('s') will always return true.

您的代码无法正常工作的原因是Web浏览器会自动为您的图片网址添加网站路径,因为您使用的是相对图片网址。所以你会在每个网址中都有's'字符(因为s字母在网站网址中)。并且每个.match('s')将始终返回true。

The solution is just to find out another checking of current image.

解决方案只是找出当前图像的另一个检查。

Here is example which logs out image src, so it should help you to understand the problem: https://jsfiddle.net/0yL0fwpL/4/

这是注销图像src的示例,因此它应该可以帮助您理解问题:https://jsfiddle.net/0yL0fwpL/4/

Html:

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

Javascript:

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

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

Working example: https://jsfiddle.net/0yL0fwpL/2/

工作示例:https://jsfiddle.net/0yL0fwpL/2/

#1