將低效代碼轉換爲循環？使用Javascript

Question

我有顏色框，看起來像這樣的網頁：

每個盒子都有它自己的DIV，第一個具有「一個」，第二個是「二」的ID，並等等。它應該是一個猜謎遊戲，如果你點擊了正確的盒子，你會贏，如果你選錯了盒子，你會輸。使用數字生成器隨機選擇正確的框。我的JavaScript代碼正在工作，但我想知道是否有更有效的方式來編寫它？這裏是我現在有：

function rand(){ 
    temp = Math.floor((Math.random()*6)+1); 
    document.getElementById("one").onclick = one; 
    document.getElementById("two").onclick = two; 
    document.getElementById("three").onclick = three; 
    document.getElementById("four").onclick = four; 
    document.getElementById("five").onclick = five; 
    document.getElementById("six").onclick = six; 
} 

function correct(){ 
    alert("You are correct"); 
} 

function incorrect(){ 
    alert("You are incorrect"); 
} 

function one(){ 
if (temp == 1){ 
    correct(); 
} 
else { 
    incorrect(); 
} 
} 

function two(){ 
if (temp == 2){ 
    correct(); 
} 
else { 
    incorrect(); 
} 
} 

function three(){ 
if (temp == 3){ 
    correct(); 
} 
else { 
    incorrect(); 
} 
} 

代碼繼續這樣的所有六個盒子。我一直在想幾個小時，我怎麼可以用循環或其他方法做到這一點，但我無法弄清楚。任何幫助將非常感激。

Answer 1

由於它是隨機生成的，因此您點擊哪個框並不重要。舉個例子，我在我的網站上有一個迷你遊戲，這是一張刮刮卡：有十二個區域可供您選擇，但您只能選擇一個。在內部，它對你挑選的人來說完全沒有區別。這裏同樣適用。

所以，試試這個：

HTML：

<div id="board"> 
    <div id="one"></div> 
    <div id="two"></div> 
    .... 
</div> 

JS：

document.getElementById('board').onclick = function() { 
    if(Math.random() < 1/6) { 
     alert("You win!"); 
    } 
    else { 
     alert("Sorry, you lost..."); 
    } 
} 

編輯：Here是演示如何允許在勝率超過一個偶然的演示。然而，請注意，對於任何嚴重的目的，您應該向服務器提交請求，並讓服務器告訴您是否贏或輸，否則它非常容易作弊;）

Answer 2

使用類似jQuery的DOM操作庫確實有幫助在這種情況下。但是，如果你願意留在香草的JavaScript，你可以使用querySelectorAll /的addEventListener事件委託，並檢查調用元素的ID，並就

檢查工作的工作代碼上http://jsfiddle.net/KYvGf/

$(function(){ 
    var $box, $boxes = [], secret = Math.floor((Math.random()*6)+1); 

    $(document).on('click', '.box', function(event){ 
    var $el = $(event.target); 
    if ($el.data('id') === secret){ 
     alert('bingo!'); 
    } 
    }); 

    for (var i = 1; i < 7; i++){ 
    $box = $('<div/>', {'class': 'box'}); 
    switch (i){ 
     case 1: 
     $box.css({'backgroundColor': 'red'}); 
     break; 
     case 2: 
     $box.css({'backgroundColor': 'blue'}); 
     break; 
     case 3: 
     $box.css({'backgroundColor': 'green'}); 
     break; 
     case 4: 
     $box.css({'backgroundColor': 'yellow'}); 
     break; 
     case 5: 
     $box.css({'backgroundColor': 'purple'}); 
     break; 
     case 6: 
     $box.css({'backgroundColor': 'orange'}); 
     break; 
    } 
    $box.data('id', i); 
    $boxes.push($box); 
    } 
    $('#holder').append($boxes); 
}); 

<div id="holder"></div>