if else conditions problems

Question

嗨，我在这个函数中有一些问题。

我想创建一个带有5个div的传送带/滑块，点击左箭头时第一个div移动到-336px的左侧，但下一个div（框2）的点击不动。

到左边，我不知道为什么条件没有验证。

<div class="test"> 
    <div id="box1" class="box_img" style="background:black"> 
     <img src="images/1.jpg" />  
    </div> 
    <div id="box2" class="box_img" style="background:black"> 
     <img src="images/2.jpg" />  
    </div> 
    <div id="box3" class="box_img" style="background:black"> 
     <img src="images/4.jpg" />  
    </div> 
    <div id="box4" class="box_img" style="background:black"> 
     <img src="images/4c .jpg" />   
    </div> 
    <div id="box5" class="box_img" style="background:black"> 
     <img src="images/5.png" />  
    </div> 
</div> 
<div class="arrow" id="arrow_left"> 
    <img src="images/arrow_right.png" /> 
</div> 
<div class="arrow" id="arrow_right"> 
    <img src="images/arrow_left.png" /> 
</div> 

function Slide(){ 
    $(document).ready(function(){ 
     $("div.box_img").each(function(i){ 
      var firstBox = $("#box1"); 
      var secondBox = $("#box2"); 
      var thirdBox = $("#box3"); 
      var fourthBox = $("#box4"); 
      var fifthBox = $("#box5"); 
     $("#arrow_left").on({ 
      click:function(){ 

       if(i=1){ 
        firstBox.animate({"margin-left":"-336px"},400); 
        //return(i<2); 
       } 
       else if(i=2){ 
        secondBox.animate({"margin-left":"-336px"},400); 
        //return(i<3); 
       } 
       else if(i=3){ 
        thirdBox.animate({"margin-left":"-336px"},400); 
        //return (i<4); 
       } 
       else if(i=4){ 
        fourthBox.animate({"margin-left":"-336px"},400); 
        //return (i<5); 
       } 
       else if(i=5){ 
        fiftheBox.animate({"margin-left":"-336px"},400);  
        //return (i<6); 
       }else{ 
        alert("else finale"); 
       };  
      }//end click fn 
     }) //end on 
     console.log(i); 
     })//end each 
    }) 
}; 

Answer 1

使用==或===比较。您现在正在使用赋值运算符=。