Question

点击div时，我的身体背景图像会发生变化。根据它是左侧还是右侧div，图像会朝不同方向变化。

但是，我注意到我只需要两次点击就可以找到我想要的方向。例如，如果我想从图片1到图片2，第一次点击将我发送到图片零，然后第二次点击图片1然后再点击2等。

有人可以查看我的JavaScript并查看可能导致此问题的原因吗？

HTML

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="Javascript/imageclick.js"></script>
        <link rel="stylesheet" href="CSS/imgCSS.css">
    </head>
    <body id="imgClickAndChange" style="margin: 0px; background: url('./Images/furnace2.png'); background-size: contain;">
    <div>
       <div id="div-left" style="height: 100%; width: 50%; float: left" onclick="changeImageMinus()">
       </div>
        <div id="div-right" style="height: 100%; width: 50%; float: right" onclick="changeImagePlus()">
       </div>
    </div>
    </body>
</html>

的JavaScript

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

Answer 1

您的代码似乎工作正常，但代码远远超过必要的代码。

以下内容会大大减少您的代码。您在这里只需要一个功能，并且您不需要对counter的每个值进行单独测试，因为新图像总是比当前图像多2个。

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

＆＃13;

// Get references to the DOM objects
var changeDown = document.getElementById("div-left");
var changeUp = document.getElementById("div-right");

// Set up the event handlers. Both elements will call the same handler, but 
// each will pass an argument indicating the direction to scroll the images.
changeDown.addEventListener("click", function(){
  changeImage("down");
});

changeUp.addEventListener("click", function(){
  changeImage("up");
});

var counter = 1;

// Just one function is needed here. The direction argument will determine 
// whether to go up or down
function changeImage(direction){

  // Since this was in every condition, just write it once:
  $("#imgClickAndChange").css("background-size", "contain");
    
  // All images use the same path, except for the number in the file name
  var fileName = "./Images/furnaceNUM.png";
    
  // If the counter is at an edge, don't go past it, otherwise adjust the counter
  // according to the direction
  if(counter == 0 && direction == "down"){
    counter = 5;
  } else if(counter == 5 && direction == "up"){
    counter = 0;
  } else if(direction == "down"){
    counter--;
  } else {
    counter++
  }
    
  // The displayed image will always be 2 more than the counter
  $("#imgClickAndChange").css("background", "url(" + fileName.replace("NUM", counter + 2) + ")");    
    
  // Since you want to log the counter all the time, just write it once
  console.log("direction: " + direction, ", counter: " + counter, ", Displayed image: " + fileName.replace("NUM", counter + 2));
};

＆＃13;

#div-left { background-color:rgba(255, 0,0,.2); }
#div-right { background-color:rgba(0, 255,0,.2); text-align:right;  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="div-left" style="height: 100%; width: 50%; float: left">&lt;&lt;</div>
<div id="div-right" style="height: 100%; width: 50%; float: right">&gt;&gt;</div>

＆＃13;

Answer 2

因为您在每个if语句的末尾设置了var计数器，所以下一次单击将在您上次单击的方向上设置背景，而不是的方向点击。

例如：

在页面加载时，背景为furnace2.png和counter = 1
点击#div-right，后台将是furnace3.png（因为counter = 1），然后changeImagePlus（）设置counter = 2
点击#div-left，后台将是furnace4.png（因为counter = 2），然后changeImageMinus（）设置counter = 1

相反，最初将counter设置为0并在 if语句之前更改。然后它会表现得像这样：

在页面加载时，背景为furnace2.png且counter = 0

点击#div-right，changeImagePlus（）设置counter = 1，背景为furnace3.png

单击#div-left时，changeImageMinus（）设置counter = 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 个答案: