創建圖像問答遊戲

Question

好的。我很難找出答案。我有一個遊戲，有一個問題和四個圖像，回答這個問題需要點擊正確的圖像。

代碼有很多問題（我知道）我只是試圖分解它來獲得一些工作。

如何讓程序更好地與自己交談，例如，現在如果我點擊任何圖像，我會根據image[2] = true;得到反應。但我似乎無法寫出一個if語句，說如果這個圖像被點擊，然後做一些事情。任何幫助或建議，讓我在這個駝峯會很好。

<div class="game"> 

    <div class="round round1"> 
     <div class="question"> If put in alphabetical order, which image would come third? </div> 
     <div class="image image0" > <img src="images/image1.gif" /></div> 
     <div class="image image1" ><img src="images/image2.gif" /> </div> 
     <div class=" image image2" > <img src="images/image3.gif" /></div> 
     <div class="image image3" > <img src="images/image4.jpg" /></div> 
    </div> 
</div> 
<script> 
    var image = [false, false, false, false]; 
    var imageName = ["Car Image","Boat Imagege","Scooter Image","Snow Mobile Image"]; 

    $(".image0").click(function() { 
     image[0] = true;  
     $(".question").replaceWith("The " + imageName[0] + " image is incorrect"); 
     $('.image0').css({"background-color":"red"}); 

    }); 

    $(".image1").click(function() { 
     image[1] = true;  
     $(".question").replaceWith("The " + imageName[1] + " image is incorrect"); 
     $('.image1').css({"background-color":"red"}); 
    }); 


    $(".image2").mouseup(function() { 
     image[2] = true; 

     $(".question").replaceWith("Correct, the answer is <b>" + imageName[2] + "</b> image"); 
     $('.image2').css({"background-color":"#95d456"}); 

    }); 

    $(".image3").click(function() { 
     image[3] = true; 

     $(".question").replaceWith("The " + imageName[3] + " image is incorrect"); 
     $('.image3').css({"background-color":"red"}); 

    }); 
</script> 

Answer 1

點擊圖像後，您的點擊功能已經執行。你可以讓「正確」的圖像執行你需要的任何代碼（以及更新你的數組）。否則，你可以寫一個for循環來檢查image []是否爲真值。

Answer 2

「但我似乎無法寫if語句，說如果這個圖像是 點擊然後做點什麼。」

您已經有圖像的onclick事件，那麼有什麼問題？

嘗試在您的頁面上包含jquery/javascript腳本標記，並用$(function(){ });環繞您的​​腳本。