如何在每次单击框时更改图像

问题描述：

我正在制作一个游戏，每次单击该框时都会显示一个数字的图像。如何在每次单击框时更改图像

我试图每次用户单击该框时更改背景图像。有九个图像。第一次点击后，图像将变为img/num1.png等。第9次点击后，我希望它回到第一个图像（img/num1.png）。有没有办法做到这一点，而没有得到一个无限循环？

现在它到达第9个图像，然后停止。将有四个盒子需要这样做。以下是我有：

var squareClicks = 0; 

$('.numSquares').click(userPicksNum); 

function userPicksNum() 
{ 

    for(var i = 0; i <= 10; i++) 
    { 

    if (squareClicks == 1) 
     { 
      //when box is clicked set background image 
      $(this).attr('src', 'img/num1.png'); 
      squareClicks++ 
      checkNums(); 
     } 

     else if (squareClicks == 2) 
     { 
      $(this).attr('src', 'img/num2.png'); 
      squareClicks++ 
      checkNums[2]; 
     } 

     else if (squareClicks == 3) 
     { 
      $(this).attr('src', 'img/num3.png'); 
      squareClicks++ 
      checkNums[3]; 
     } 

     else if (squareClicks == 4) 
     { 
      $(this).attr('src', 'img/num4.png'); 
      squareClicks++ 
      checkNums[4]; 
     } 

     else if (squareClicks == 5) 
     { 
      $(this).attr('src', 'img/num5.png'); 
      squareClicks++ 
      checkNums[5]; 
     } 

     else if (squareClicks == 6) 
     { 
      $(this).attr('src', 'img/num6.png'); 
      squareClicks++ 
      checkNums[6]; 
     } 

     else if (squareClicks == 7) 
     { 
      $(this).attr('src', 'img/num7.png'); 
      squareClicks++ 
      checkNums[7]; 
     } 

     else if (squareClicks == 8) 
     { 
      $(this).attr('src', 'img/num8.png'); 
      squareClicks++ 
      checkNums[8]; 
     } 

     else if (squareClicks == 9) 
     { 
      $(this).attr('src', 'img/num9.png'); 
      checkNums[9]; 
      squareClicks++ 
     } 

    } 
}

答

在你的问题出这个整个的代码替换：

DEMO

var squareClicks = 1; 
$('.numSquares').click(userPicksNum); 

function userPicksNum() { 


    if (squareClicks == 10) { 
     squareClicks = 1 } // resets your counter when the last image is reached 
     alert(squareClicks); // just for testing, remove this...  
     $(this).attr('src', 'img/num'+squareClicks+'.png'); //get's the correct img for you 
     squareClicks++; //sets square clicks up 


}

答

如果我没有理解你的问题的权利，你可以做3件事情：
1）摆脱for循环。
2）在最后一个if语句中，您可以指定squareClicks = 1;

var squareClicks = 1; 

$('.numSquares').click(userPicksNum); 

function userPicksNum() 
{ 

    if (squareClicks == 1) 
    { 
    //when box is clicked set background image 
    $(this).attr('src', 'img/num1.png'); 
    squareClicks++; 

    } 

    else if (squareClicks == 2) 
    { 
    $(this).attr('src', 'img/num2.png'); 
    squareClicks++; 

    } 

    else if (squareClicks == 3) 
    { 
    $(this).attr('src', 'img/num3.png'); 
    squareClicks++; 

    } 

else if (squareClicks == 4) 
    { 
    $(this).attr('src', 'img/num4.png'); 
    squareClicks++; 

    } 

    else if (squareClicks == 5) 
    { 
    $(this).attr('src', 'img/num5.png'); 
    squareClicks++; 

    } 

    else if (squareClicks == 6) 
    { 
    $(this).attr('src', 'img/num6.png'); 
    squareClicks++ 

    } 

    else if (squareClicks == 7) 
    { 
    $(this).attr('src', 'img/num7.png'); 
    squareClicks++; 

    } 

    else if (squareClicks == 8) 
    { 
    $(this).attr('src', 'img/num8.png'); 
    squareClicks++; 

    } 

else if (squareClicks == 9) 
    { 
    $(this).attr('src', 'img/num9.png'); 
    squareClicks=1; 
    } 

}

希望它能帮助：
3）开头

下面指定squareClicks到1的代码版本我已经上述！

如何在每次单击框时更改图像

相关推荐