Рандомизированная группировка Jquery - PullRequest
Новая
       6

Рандомизированная группировка Jquery

0 голосов
/ 03 марта 2011

Я решил, что мой предыдущий вопрос, возможно, не ясен ни по названию, ни по результату, поэтому я решил задать такой вопрос ...

У меня есть 3 категории (A, B, C), и в этих категориях у меня есть 3 предмета в каждой. Итак, категория А) собака, кошка, мышь Б) яблоко, вишня, банан С) красный, зеленый, желтый.

Мне было интересно, возможно ли сгруппировать эти предметы из категорий в случайном порядке. Так, например, каждый раз, когда вы нажимаете на одну и ту же кнопку, она группирует: собака, яблоко, желтый или кошка, вишня, зеленый или мышь, яблоко, красный и т. Д. И добавляет класс .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"

Любые мысли или предложения очень ценятся

-Давид

Ответы [ 2 ]

1 голос
/ 03 марта 2011

Это, вероятно, поможет вам. Для 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");
}

Идея состоит в том, чтобы сгенерировать случайное число в номере каждого класса, а затем добавить к нему класс.

0 голосов
/ 03 марта 2011

Это возможно, как вы можете видеть ниже. Есть определенно более элегантные способы сделать это, но я подумал, что это было бы довольно просто понять.

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>
...