Question

我对Javascript很新，我试图实现非常简单的东西，但似乎不可能（至少我想要的方式）。基本上，我有一个带有图像的HTML文件，每当我点击一个按钮时我想要更改为另一个图像。我总共有4张图片，HTML文件中的初始图片是＆＃34; 1.jpg＆＃34;。问题是，我只能改变最初的＆＃34; 1.jpg＆＃34;到＆＃34; 2.jpg＆＃34;以及任何进一步改变的尝试＆＃34; 2.jpg＆＃34;到＆＃34; 3.jpg＆＃34;等等失败了。

这是代码

function changepicture() {  
   var a = ["1.jpg" , "2.jpg" , "3.jpg" , "4.jpg"];       
   if (document.getElementById('img1').src=a[0])
   {
        document.getElementById('img1').src=a[1];
   }    
   else if (document.getElementById('img1').src=a[1])
   {
       document.getElementById('img1').src=a[2];
   }    
   else if (document.getElementById('img1').src=a[2])
   {
       document.getElementById('img1').src=a[3];
   }
   else
   { 
       document.getElementById('img1').src=a[0]; 
   }   
}

问题是，如果我将代码更改为：

，我可以使用它

var i=0;

function changepicture() {        
   i++;        
   if (i>3) { i=0; }        
   var a = ["1.jpg" , "2.jpg" , "3.jpg" , "4.jpg"];        
   document.getElementById('img1').src=a[i];    
}

但是，尽管有一个可行的替代方案，我仍然不满意，因为我确信第一种方法也应该有效。

Answer 1

您似乎正在使用=您要使用的地方==或===。

编辑：为了更清楚，我的意思是在if语句本身的括号中，如下所示：

if (document.getElementById('img1').src == a[0]) {

双重编辑：我相信我发现了另一个问题。它是if语句的逻辑：

document.getElementById('img1').src

不等于html中的内容，例如＆＃39; 1.jpg＆＃39;。它返回WHOLE网址。查看我制作的这个快速小提琴的控制台日志：http://jsfiddle.net/71t4axv0/1/

首先，它会抱怨该图像并非真正的图像。然后你可以看到实际的逻辑：＆＃39; http://fiddle.jshell.net/_display/2.jpg＆＃39;当然，不等于2.jpg

Answer 2

if (document.getElementById('img1').src=a[0]) {
    document.getElementById('img1').src=a[1];
}

此特定声明必须==而不是=。

Answer 3

其他答案已解决的= / ==拼写错误。在这里，我将解决该函数的第二个版本，您似乎试图将其作为循环实现。你必须这样写：

function changepicture() {
    var a = ["1.jpg" , "2.jpg" , "3.jpg" , "4.jpg"];
    var element = document.getElementById('img1');
    var src = element.src.split('/').pop(); // get filename
    for(var i = 0; i < 3; i++) {
        if (src == a[i]) {
            element.src = a[i + 1];
            return; // stop evaluating now
        }
    }

    element.src = a[0];
}

^{注意：作为解决 holl 指出使用.src属性的问题的解决方法，我使用了.src.split('/').pop()获取文件名。这是有效的，但另一种解决方案是使用数组中的完整路径。}

如果您愿意，可以使用indexOf方法和%运算符来简化此操作：

function changepicture() {
    var a = ["1.jpg" , "2.jpg" , "3.jpg" , "4.jpg"];
    var element = document.getElementById('img1');
    var curIndex = a.indexOf(element.src.split('/').pop());
    element.src = a[(curIndex + 1) % a.length];
}

这是一个经过修改的代码段，演示了基本行为（仅使用文字，而不是图片）：

    function changepicture() {
        var a = ["1.jpg" , "2.jpg" , "3.jpg" , "4.jpg"];
        var element = document.getElementById('demo');
        var curIndex = a.indexOf(element.innerText);
        element.innerText = a[(curIndex + 1) % a.length];
    }

#demo { width: 40px; height: 40px; border: 1px solid #000; margin: 5px }

<div id="demo">1.jpg</div>
<button onclick="changepicture()">change</button>

if ... else if else语句不按预期工作

3 个答案: