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

Question

我正在为一个小项目创建一个内存游戏，我的逻辑如下:

1. 点击输入字段选择您想玩的对数
2. 使用类card1、card2等创建div。

3. 克隆 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

我添加到你的 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='card"+ i + " 将变为 "class='card1'" 依此类推。