Question

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

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

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

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

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

Answer 1

您的代码无效的原因是Web浏览器会自动为您的图片网址添加网站路径，因为您使用的是相对图片网址。所以你会有＆＃39;每个网址中的字符（因为s字母位于网站网址中）。并且每个.match('s')将始终返回true。

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

以下是注销图像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");
    }
 }

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

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

1 个答案: