Question

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

点击输入字段，选择您想要玩多少对
使用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? 但是我无法使它发挥作用。

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

Answer 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'"，依此类推。

为基于jQuery的内存游戏动态创建div

1 个答案: