向使用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++;
  });
}