如何確保我的函數每次點擊只運行一次

Question

 $('#myButton').click(function() { $('#buttonOne').click(function() { if(getOneOrTwo() === "one") { $('.firstObject').css('visibility', 'hidden'); $('.secondObject').css('visibility','visible'); } else { alert("Sorry, wrong guess."); } } $('#buttonTwo').click(function() { if(getOneOrTwo() === "two") { $('.firstObject').css('visibility', 'hidden'); $('.secondObject').css('visibility','visible'); } else { alert("Sorry, wrong guess."); } });

我在屏幕上有幾張撲克牌，上面都有鑽石。 一開始我把所有的鑽石都藏起來了。 單擊開始按鈕時，我希望在第一張卡片上出現一個菱形，並選擇一個隨機數，其中 < 0.5 設置為紅色，> 0.5 設置為黑色。 然后用戶通過單擊黑色或紅色按鈕來猜測它是紅色還是黑色。 如果他們猜對了，第一張牌上的菱形應該被隱藏起來，第二張牌上會出現一個菱形，表明他們在游戲中的進展。 如果他們錯了，它應該顯示一個警報，告訴他們他們錯了。 紅色按鈕似乎工作正常，但是每次關閉警報時，黑色按鈕都會導致警報繼續彈出，直到正確為止，就好像按鈕一直被點擊直到正確一樣。

Answer 1

通常不應在另一個點擊處理程序中設置點擊處理程序。 在大多數情況下，這是一種代碼異味，就像這里一樣。

您需要讓“開始”按鈕選擇顏色（進行選擇），但僅此而已； 至少不要在這里為其他按鈕分配點擊處理程序。 它可以工作，但是當您在這個特定的“開始”點擊處理程序之外定義點擊處理程序時，這很簡單。

紅色/藍色點擊處理程序不應挑顏色（再次），因為這時用戶可以嘗試幾次相同的按鈕，直到這將是正確的。 僅在單擊“開始”按鈕時才進行選擇似乎更合乎邏輯，之后就會發生對該特定卡片的猜測。

所以將選擇的卡存儲在某個地方。 像這樣：

var selected = null; // No selection yet
$('#buttonOne, #buttonTwo').hide(); // Initially hide the guessing buttons.

$('#myButton').click(function() {
    selected = getOneOrTwo();
    $('#buttonOne, #buttonTwo').show(); // Now that we have a selection, allow guessing
});

$('#buttonOne').click(function() {
    if (selected === "one") {
        // here do what ever you want to do when the guess is right
    } else {
        alert("Sorry, wrong guess.");
    }
});

// Similarly for the other button