随机分组Jquery

Question

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

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

我想知道是否可以将这些项目从类别中随机分组。因此，例如，每次您单击同一个按钮时，它都会分组：dog,apple,yellow or cat,cherry,green or 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>