Javascript 为什么在浏览我的图像时要点击两下才能找到合适的方向？

我有一个身体，当点击一个div时，它的背景图像会发生变化。根据它是左div还是右div，图像会在不同的方向上发生变化

然而，我注意到我需要点击两下才能到达我想要的方向。例如，如果我想从图片1转到图片2，第一次单击会将我发送到图片0，然后第二次单击图片1，然后是图片2，以此类推

有没有人可以看看我的JavaScript，看看是什么导致了这种情况

HTML

---

您的代码似乎工作正常，但它的代码比需要的多得多

以下内容大大减少了您的代码。这里只需要一个函数，不需要对

计数器的每个值进行单独测试，因为新图像总是比当前图像多2个

此外，不应使用内联HTML事件处理程序（onclick、onmouseover等）。事件处理应该在JavaScript中使用
addEventListener
完成


//获取对DOM对象的引用
var changeDown=document.getElementById（“div left”）；
var changeUp=document.getElementById（“div-right”）；
//设置事件处理程序。两个元素都将调用相同的处理程序，但是
//每个将传递一个参数，指示滚动图像的方向。
addEventListener（“单击”，函数（）{
更改图像（“向下”）；
});
changeUp.addEventListener（“单击”，函数（）{
更改图像（“up”）；
});
var计数器=1；
//这里只需要一个函数。方向参数将决定
//上升还是下降
功能更改图像（方向）{
//因为这是在每种情况下，只需写一次：
$（“#imgClickAndChange”）.css（“背景大小”、“包含”）；
//除文件名中的数字外，所有图像都使用相同的路径
var fileName=“./Images/furnaceNUM.png”；
//如果计数器位于边缘，不要越过它，否则调整计数器
//按照指示
如果（计数器==0&&方向==“向下”）{
计数器=5；
}否则，如果（计数器==5&&direction==“向上”）{
计数器=0；
}否则如果（方向=“向下”）{
计数器--；
}否则{
柜台++
}
//显示的图像将始终比计数器多2个
$（“#imgClickAndChange”）.css（“背景”、“url”（+fileName.replace（“NUM”，counter+2）+”）；
//由于您想一直记录计数器，只需写一次即可
console.log（“方向：+direction”，计数器：+counter”，显示图像：+fileName.replace（“NUM”，计数器+2））；
};
#div left{背景色：rgba（255,0,0,2）；}
#div right{背景色：rgba（0，255,0,2）；文本对齐：right；}
因为您在每个if语句的末尾设置了var counter，所以下一次单击将按照您上次单击的方向而不是刚才单击的方向设置背景

例如：


页面加载时，背景为furnace2.png，计数器=1
单击#div right，背景将为furnace3.png（因为计数器=1），然后changeImagePlus（）将计数器设置为2
单击#div left，背景将为furnace4.png（因为计数器=2），然后ChangeImage减号（）将计数器设置为1

相反，最初将计数器设置为0，并在if语句之前更改它。那么它的行为将如下所示：


页面加载时，背景为furnace2.png，计数器=0
单击#div right，changeImagePlus（）将计数器设置为1，背景将为furnace3.png
单击#div left，ChangeImage减号（）将计数器设置为0，背景将再次为furnace2.png

counter = 0;
function changeImageMinus() {
  if (counter == 0) {
    counter = 5;
  }
  else {
    counter--;
  }

  if (counter == 0) {
    $("#imgClickAndChange").css("background", "url(./Images/furnace2.png)");
  }
  // Etc.
}


对我来说似乎像预期的那样工作。如果单击红色框，将显示2、3、4、5、6、7。如果你点击蓝色框，会变成2，3，2，7，6。噢，可怜的RP12不知道是什么击中了他/她；）与其“向上”和“向下”，不如将+1和-1传递给changeImage（）并添加到计数器，然后偏移超出范围的数字。也许会在混合中加入一个模。@yezzz都是真的，但我想把逻辑与原来的两个函数联系起来，以尽量减少他/她看到我重新编写的代码时对RP12的冲击。
var counter = 1;

function changeImageMinus(){
    console.log("minus");
    if(counter == 0){
        $("#imgClickAndChange").css("background", "url(./Images/furnace2.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter = 5;
        console.log(counter);
    }
    else if(counter == 1){
       $("#imgClickAndChange").css("background", "url(./Images/furnace3.png)");
       $("#imgClickAndChange").css("background-size", "contain");
        counter--;
        console.log(counter);
    }
    else if(counter == 2){
        $("#imgClickAndChange").css("background", "url(./Images/furnace4.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter--;
        console.log(counter);
    }
    else if(counter == 3){
        $("#imgClickAndChange").css("background", "url(./Images/furnace5.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter--;
        console.log(counter);
    }
    else if(counter == 4){
        $("#imgClickAndChange").css("background", "url(./Images/furnace6.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter--;
        console.log(counter);
    }
    else if(counter == 5){
        $("#imgClickAndChange").css("background", "url(./Images/furnace7.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter--;
        console.log(counter);
    }
};

function changeImagePlus(){
    console.log("plus");
    if(counter == 0){
        $("#imgClickAndChange").css("background", "url(./Images/furnace2.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter++;
        console.log(counter);
    }
    else if(counter == 1){
        $("#imgClickAndChange").css("background", "url(./Images/furnace3.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter++;
        console.log(counter);
    }
    else if(counter == 2){
        $("#imgClickAndChange").css("background", "url(./Images/furnace4.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter++;
        console.log(counter);
    }
    else if(counter == 3){
        $("#imgClickAndChange").css("background", "url(./Images/furnace5.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter++;
        console.log(counter);
    }
    else if(counter == 4){
        $("#imgClickAndChange").css("background", "url(./Images/furnace6.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter++;
        console.log(counter);
    }
    else if(counter == 5){
        $("#imgClickAndChange").css("background", "url(./Images/furnace7.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter = 0;
        console.log(counter);
    }
};

counter = 0;
function changeImageMinus() {
  if (counter == 0) {
    counter = 5;
  }
  else {
    counter--;
  }

  if (counter == 0) {
    $("#imgClickAndChange").css("background", "url(./Images/furnace2.png)");
  }
  // Etc.
}