将随机类添加到使用 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

我建议使用单独的变量来跟踪索引，而不是 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++;
  });
}

Answer 3

您的 randomizeDeck() 函数可以重写为使用相同的类名数组两次：

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

注意：我会将变量card 重写为$cards，以便您知道它是一个jQuery 对象，在本例中是它们的集合。否则，很难将其与任何其他 javascript var 区分开来。

Answer 4

试试这样的 - 现在已经更新了 看这个小提琴 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();