随机分组 Jquery

Question

我认为我之前的问题在标题和结果中可能都不清楚，所以我决定问这样的问题...

我有 3 个类别（A、B、C），在这些类别中我每个类别有 3 个项目。所以类别A）狗，猫，老鼠B）苹果，樱桃，香蕉C）红色，绿色，黄色。

我想知道是否可以将这些项目从类别中随机分组。因此，例如每次您单击同一个按钮时，它都会分组：dog、apple、yellow 或 cat、cherry、green 或 mouse、apple、red 等...并将类 .grouped 或其他内容添加到该组中。一次只有一个可能的组包含三个项目。

所以我想它会像从开始

class="dog"
class="cat"
class="mouse"
class="apple"
class="cherry"
class="banana"
class="red"
class="green"
class="yellow"

然后你单击按钮 &获取：

class="dog grouped"
class="apple grouped"
class="yellow grouped"

再次单击按钮&得到

class="cat grouped"
class="cherry grouped"
class="green grouped"

任何想法或建议，非常感谢

-大卫

Answer 1

这可能会让你继续前进。对于html：

<span class="animal">dog</span>
<span class="animal">cat</span>
<span class="animal">mouse</span>
<span class="fruit">apple</span>
<span class="fruit">cherry</span>
<span class="fruit">banana</span>
<span class="colour">red</span>
<span class="colour">green</span>
<span class="colour">yellow</span>

然后这个javascript将随机添加类

function regroup() {
  //remove existing
  $(".grouped").removeClass("grouped");

  //the random Math.floor is just to generate a random number
  $(".animal:eq(" + (Math.floor(Math.random() * 4)) + ")").addClass("grouped");
  $(".fruit:eq(" + (Math.floor(Math.random() * 4)) + ")").addClass("grouped");
  $(".colour:eq(" + (Math.floor(Math.random() * 4)) + ")").addClass("grouped");
}

这个想法是在每个类的数量内生成一个随机数，然后将类添加到其中。

Answer 2

正如您在下面看到的那样，这是可能的。肯定有更优雅的方法来做到这一点，但我认为这会很容易理解。

http://jsfiddle.net/EN7HQ/1/

JS

var groupA = ["dog","cat","mouse"],
    groupB = ["apple", "cherry","bannana"],
    groupC = ["red","green","yellow"];

$("#clickme").click(function(){
    $("#groups").children().remove();
    var itemA = groupA[Math.round(Math.random()*2)],
        itemB = groupB[Math.round(Math.random()*2)],
        itemC = groupC[Math.round(Math.random()*2)];

    $("#groups").append("<div class='" + itemA + " grouped'>" + itemA + "</div>"); 
    $("#groups").append("<div class='" + itemB + " grouped'>" + itemB + "</div>"); 
    $("#groups").append("<div class='" + itemC + " grouped'>" + itemC + "</div>"); 
});

标记

<div id="clickme">Click Me</div>
<div id="groups">
</div>