Javascript if…else if…else语句未按预期工作

我对Javascript相当陌生，我试图实现一些非常简单的东西，但这似乎是不可能的（至少是我想要的方式）。基本上，我有一个HTML文件，其中有一个图像，每次我点击一个按钮时，我都想将其更改为不同的图像。我一共有4张图片，HTML文件中的初始图片是“1.jpg”。问题是，我只能将初始的“1.jpg”更改为“2.jpg”，而任何进一步尝试将“2.jpg”更改为“3.jpg”等都会失败

这是密码

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];    
}

---

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

似乎您正在使用=您想要使用==或==

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

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

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];
}

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

document.getElementById('img1').src

不只是等同于html中的内容，比如'1.jpg'。它返回整个url。查看我制作的这款快速小提琴上的控制台日志：

首先，它会抱怨这个图像不是真正的图像。然后您可以看到实际的逻辑：“”，当然，不等于2.jpg

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

---

此特定的声明必须具有

=

，而不是其他答案所述的

=

打字错误。在这里，我将介绍函数的第二个版本，您似乎试图将其实现为一个循环。你必须这样写：

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

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];
}

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

函数更改图片（）{
VarA=[“1.jpg”、“2.jpg”、“3.jpg”、“4.jpg”]；
var元素=document.getElementById（'demo'）；
var curIndex=a.indexOf（element.innerText）；
element.innerText=a[（curIndex+1）%a.length]；
}

#demo{宽度：40px；高度：40px；边框：1px实心#000；边距：5px}

1.jpg
将以下内容更改为：1）“如果（document.getElementById（'img1'）.src=a[0]）”改为“如果（document.getElementById（'img1'）.src==a[0]）”2）“如果（document.getElementById（'img1'）.src=a[1]）”否则（document getElementById（'img1'）.src=a[1]）”改为“如果（document getElementById（'img1'）.src==a[1]）”（document.getElementById（'img1'）.src=a[2]）到“else if（document.getElementById（'img1'）.src==a[2]）实际上让事情变得更糟。在这些更改之后，我甚至无法从“1.jpg”切换到“2.jpg”，可能是编辑器出现了错误？？它可能是在
.src=a[0]
但是我必须看到实际的代码。你可以创建一个产生这种行为的代码段吗？向你的代码中添加
警报（document.getElementById（'img1'）.src）；
以查看它包含的内容。我假设它不仅仅是
1.jpg
。就代码段而言，我必须先找出代码段是什么，哈哈（可能与我不是以英语为母语的人有关）更改如下：1）“if（document.getElementById（'img1'）.src=a[0]）”改为“if（document.getElementById（'img1'）.src==a[0]）”2）“else if（document.getElementById（'img1'）.src=a[1]）”改为“else if（document.getElementById（'img1'）.src==a[1]”3）“else if（document getElementById（'img1'））.src=a[2]）to“else if（document.getElementById（'img1'）。src==a[2]）”实际上让事情变得更糟。在这些更改之后，我甚至无法从“1.jpg”切换到“2.jpg”，也许编辑器有漏洞等等，我刚刚解决了问题。这是因为（）.src返回图像的完整url。我将编辑我的答案，使之更清楚。