为基于 jQuery 的记忆游戏动态创建 div

Question

我正在为一个小项目创建一个记忆游戏，我的逻辑如下：

点击输入框选择你想玩多少对
使用 classes card1、card2 等创建 divs

克隆 divs 并随机化它们在数组中的位置

$(document).ready(function () {
    $(".button").click(function () {

// create the cards
        $(".container").append("<div class='card1 cards'></div>") &&
$(".card1").clone().appendTo(".container");
        $(".container").append("<div class='card2 cards'></div>") &&
$(".card2").clone().appendTo(".container");
        $(".container").append("<div class='card3 cards'></div>") &&
$(".card3").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));
        }
    });
});

我已经创建了第 2 步和第 3 步并且它们有效（请参阅 JSFiddle），现在我想连接输入并动态设置 div 的 class 名称. 我想我需要一个数组和一些动态创建的变量——我试着按照这些建议来做： jQuery dynamically increment variable name inside a for-loop 和 How to create dynamic variables using jquery? 但我无法让它工作。

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

Answer 1

我给你加了fiddle：http://jsfiddle.net/007y4rju/1/

$(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");
        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));
        }
    });
});

基本思想是获取某人输入的数字（并将其转换为数字，否则它将是字符串），然后循环并动态创建 class 名称。所以 "class='card" + i + " 会变成 "class='card1'" 等等。

为基于 jQuery 的记忆游戏动态创建 div

Create divs dynamically for jQuery based memory game

javascript

arrays

random

jquery