Question

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

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

我想知道是否有可能随机对这些项目进行分组。因此，例如，每次单击相同的按钮时，它将分组：狗，苹果，黄色或猫，樱桃，绿色或鼠标，苹果，红色等...并添加类.grouped或其他任何组。只有一个可能的小组，一次有三个项目。

所以我想从开始就是这样

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

然后点击按钮＆amp;得到：

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

再次点击按钮＆amp;得到

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

任何想法或建议非常感谢

-David

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>

随机分组Jquery

2 个答案: