jQuery 选择具有相同类的随机元素

Question

我有类为“selectElement”的元素。当我单击具有该类的元素时，我“选择”它，并给它另一个类“selectedElements”(如果它还没有)。

但是，我有一个按钮，应该随机选择一定数量(例如 10 个)具有“selectElement”类的元素，并为它们指定“selectedElement”类。

我尝试了类似的答案 -> https://stackoverflow.com/a/1764629/1011539 ，但每次都会返回相同的值...

编辑:在乔恩的帮助下解决了。这是其他有类似问题的用户的代码:)

$("#chooseElementsRand").live("click",function(){
    $(".selectedElements").removeClass("selectedElements");
    var maxNum = parseInt($(".maxNum").html());
    var randomElements = shuffle($(".selectElement")).slice(0,maxNum).addClass("selectedElements");
    $(".selectedNum").html(randomElements.length);
    if(randomElements.length==maxNum) {
        $(".buttonToProceed").removeClass("notShown");
    }
});

Answer 1

每当您想要从 X 中真正随机选取 N 个元素时，解决方案就是 Fisher-Yates shuffle 。 This page有一个 Javascript 实现(加上基本原理，加上漂亮的动画，所以去看看):

function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

考虑到随机播放，您可以随机选择 X 个元素

var items = shuffle($(".selectElement")).slice(0, X);

<强> Here's a working fiddle玩。

脚注:由于您只对一定数量的随机选择感兴趣，因此不需要像上面的 shuffle 那样无条件地对整个输入数组进行洗牌；您可以只打乱一小部分，然后使用 .slice 将其切掉并使用它。我将把这个作为练习；小心不要错误地捕获*未*洗牌的部分!