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

【问题标题】：Create divs dynamically for jQuery based memory game为基于 jQuery 的记忆游戏动态创建 div
【发布时间】：2015-04-15 12:03:02
【问题描述】：

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

点击输入框选择你想玩多少对
创建具有 card1、card2 等类的 div。

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

$(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 的类名。我想我需要一个数组和一些动态创建的变量 - 我尝试按照以下建议来做： jQuery dynamically increment variable name inside a for-loop 和 How to create dynamic variables using jquery? 但我无法让它工作。

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

【问题讨论】：

标签： javascript jquery arrays random

【解决方案1】：

我添加到你的小提琴：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='card" + i + " 会变成"class='card1'" 等等。

【讨论】：