向使用jQuery復制的數組中的元素添加隨機類

Question

我正在創建一個匹配的游戲，並且試圖從數組中添加一個要匹配的類。 我下面的代碼創建所需的類，然后將它們隨機化。

我的問題是在randomizeDeck函數中。 我試圖兩次將每個類添加到指定的元素兩次。 當我console.log代碼時，這些類將添加到前六個元素中，而不是最后六個元素中，我需要這樣做，以便在創建的匹配游戲中具有要匹配的類。

var cardDeck = new Array();

function createDeck() {
    for (i = 1; i <= 6; i++) {
        cardDeck.push("card-" + i);
    }
}
createDeck();

var randDeck = cardDeck.sort(randOrd);

function randomizeDeck() {
    card.each(function(i){
        $(this).addClass(randDeck[i]);
    });
}
randomizeDeck();

Answer 1

我認為您的createDeck函數需要創建12個類而不是6個類。只需將每個類推送兩次：

function createDeck() {
    for (i = 1; i <= 6; i++) {
        cardDeck.push("card-" + i);
        cardDeck.push("card-" + i);
    }
}

然后，您將擁有12個類別的數組（6個唯一類別中的每個類別2個），這些類別將被隨機分配給12張卡。

Answer 2

您的randomizeDeck（）函數可以重寫為兩次使用相同的類名數組：

function randomizeDeck() {
    card.each(function(i){
        if(i < 6)
            $(this).addClass(randDeck[i])
        else
            $(this).addClass(randDeck[i-6]);
    });
}

注意：我會將變量card重寫為$cards以便您知道它是一個jQuery對象，在這種情況下是它們的集合。 否則，很難將其與其他任何javascript變量區分開。

Answer 3

嘗試類似的方法-現在已經過測試，請參見下面的內容http://jsfiddle.net/8XBM2/1/

var cardDeck = new Array();

function createDeck() {
    for (i = 1; i <= 6; i++) {
        cardDeck.push("card-" + i);
    }
}
createDeck();
var randDeck = cardDeck.sort();
alert(randDeck);

function randomizeDeck() {
    var x = 0;
    $('div').each(function(i){
     if ( i > 5) { 

                $(this).addClass(randDeck[x]);
         x++; 
      } else {
        $(this).addClass(randDeck[i]);
    }
    });
}
randomizeDeck();

Answer 4

我建議使用一個單獨的變量來跟蹤索引，而不是each索引。 一旦您檢查了一下背包，最好重新洗牌，這樣第二遍的順序就不同了。 YMMV。

function sortCards(randOrd) {
  randDeck = cardDeck.sort(randOrd);
}

function randomizeDeck() {
  var count = 0;
  cards.each(function(i) {
    if (i === 6) { count = 0; sortCards(randOrd); }
    $(this).addClass(randDeck[count]);
    count++;
  });
}