jQuery比較輸入值與跨度對象

Question

我已經構建了一個小遊戲，除了限制用戶輸入一個數字兩次之外，一切都工作正常。

用戶輸入一個數字;

<form> 
<input id="input" type="text" /> 
<input id="button" type="submit" value="Guess" /> 
</form> 

var guess = $input.val(); 

數字（猜測）被排序並存儲在id猜測的跨度。

$guesses.append('<span class="guess ' + responseClass + '">' + guess + " " +  '</span> '); 
    var sorted = $.makeArray($('#guesses span')).sort(function(a, b) { 
     return (parseInt($(a).text()) < parseInt($(b).text())) ? -1 : 1; 
    }); 
$('#guesses').html(sorted); 

如何將inputvalue（guess）與#guesses中存儲的數字進行比較？假設我輸入50，然後再輸入50 - 我希望我的程序告訴我「已輸入數字」或類似的東西。

Answer 1

猜測的主要存儲位置不應該是span，而應該是guesses變量。可以在頁面上使用span，但應該只更新它，以便與guesses變量同步。這是因爲變量意味着通用數據持有者，因此您可以通過多種方式輕鬆操作它們，但span僅用於存儲要顯示給用戶的HTML元素，因此用它們做其他事情更加困難。

在這種情況下，guesses變量可能是Array。你將用var guesses = [];初始化它。要添加一個猜測，並保持guesses分類：

guesses.push(guess); 
guesses.sort(); 
redisplayGuesses(guesses); // if you actually want this 

function redisplayGuesses(guesses) { 
    $guessesOnPage = $('#guesses'); 
    // overwrite all previous guesses on the page, to make synchronization simple 
    $guessesOnPage.empty(); // remove guess elements 
    guesses.forEach(function(guess) { 
     $guessesOnPage.append($("<span class=" + responseClass + ">" + guess + "</span>")); 
    }); 
} 

這使用.push和.sort修改數組。 redisplayGuesses使用.empty來刪除現有的子元素，然後.append s再次在.forEach循環中。

而且你問什麼，如何判斷一個猜測已經猜到了：

if (guesses.indexOf(guess) === -1) { 
    // guess not found 
    processNewGuess(guess); 
} else { 
    // the guess was found in `guesses` 
    alert("You already guessed this. Guess a different number."); 
} 

這使用方法.indexOf，這是有可能對Array的使用，但不span秒。