如何在每次單擊框時更改圖像

我正在製作一個遊戲，每次單擊該框時都會顯示一個數字的圖像。如何在每次單擊框時更改圖像

我試圖每次用戶單擊該框時更改背景圖像。有九個圖像。第一次點擊後，圖像將變爲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++ 
     } 

    } 
}

來源

2014-11-22 designer2014

在你的問題出這個整個的代碼替換：

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 


}

來源

2014-11-22 02:48:21 baao

如果我沒有理解你的問題的權利，你可以做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的代碼版本我已經上述！

來源

2014-11-22 03:15:18 raneshu

如何在每次單擊框時更改圖像

回答

相關問題