使用 jQuery 在堆栈中随机化/洗牌

Question

我正在为一个小项目构建一个非常简单的记忆游戏。逻辑如下：

1. 点击输入框选择你想玩多少对
2. 创建具有 card1、card2 等类的 div。
3. 克隆 div 并随机化它们在数组中的位置

这是我的脚本（JSFiddle 中的 fork）：

$(".button").click(function () {        
    // get the value from the input
    var numCards = parseInt($('input').val());

    for (var i = 1; i <= numCards; i++) {
        // create the cards
        $(".container").append("<div class='card" + i + " cards'></div>") &&
        $(".card" + i).clone().appendTo(".container");
    }

    // randomize cards in stack
    var cards = $(".cards");
    for (var i = 0; i < cards.length; i++) {
        var target = Math.floor(Math.random() * cards.length - 1) + 1;
        var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
        var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
        cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));
    }
});

我现在需要的是调整第3步，即动态创建目标变量，以及代码的最后一行

cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));

所以请给我一个建议 - 你会怎么做？请记住，这是一个面向初学者的项目。谢谢！

Answer 1

$(".button").click(function () {        
    // get the value from the input
    var numCards = parseInt($('input').val());

    for (var i = 1; i <= numCards; i++) {
        // create the cards
        $(".container").append("<div class='card" + i + " cards'></div>") &&
        $(".card" + i).clone().appendTo(".container");
    }

    var parent = $(".container");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});

见 jsfidle：http://jsfiddle.net/007y4rju/8/

来源：http://jsfiddle.net/C6LPY/2/

Answer 2

这是 jsfiddle 中的代码版本 - http://jsfiddle.net/007y4rju/6/

请检查行为是否与原代码一致。

$(document).ready(function () {

    $(".button").click(function () {        
        // get the value from the input
        var numCards = parseInt($('input').val());

        for (var i = 1; i <= numCards; i++) {
            // create the cards
            $(".container").append("<div class='card" + i + " cards'></div>") &&
            $(".card" + i).clone().appendTo(".container");
        }

        // randomize cards in stack
        var cards = $(".cards");
        var startTarget = Math.floor(Math.random() * cards.length - 1) + 1;
        var collection = cards.eq(startTarget);
        var nextTarget;
        var i;
        for (i = 0; i < cards.length; i++) {
            nextTarget = Math.floor(Math.random() * cards.length - 1) + 1;
            collection.before(cards.eq(nextTarget));
        }
    });
});

Answer 3

您可以在克隆 div 时随机化类名 (card%i%) 中的索引。然后你不需要洗牌克隆的 div；您可以按原样附加它们。

$(".button").click(function () {        
    // get the value from the input
    var numCards = parseInt($('input').val());

    for (var i = 1; i <= numCards; i++) {
        // create the cards
        $(".container").append("<div class='card" + i + " cards'></div>");
    }

    var aIndices = [];
    for (var i = 1; i <= numCards; i++) {
        var ix;
        do ix = Math.round(Math.random() * (numCards - 1)) + 1;
        while (aIndices.indexOf(ix) >= 0);
        aIndices.push(ix);
        // clone
        $(".card" + ix).clone().appendTo(".container");
    }
});