javascript - 在一行中随机化 4 个 div 元素 Javascript + JQuery

Question

我连续有 4 个 div 元素（它们是卡片）。我需要在每个页面刷新时混合这些 div。我怎样才能混合它们？

我这样做了：

var random = Math.floor(Math.random() * $(".card").length);
    $(".card")
      .hide()
      .eq(random)
      .show();

但它只提供 1 个随机 div。我需要 4 个随机 div。

这是div：

            <div className="card clubs" ref="card1">
              <img className="img" src={a} alt="a" />
            </div>
            <div className="card diamonds" ref="card2">
              <img className="img" src={b} alt="b" />
            </div>
            <div className="card hearts" ref="card3">
              <img className="img" src={c} alt="c" />
            </div>
            <div className="card spades" ref="card4">
              <img className="img" src={d} alt="d" />
            </div>

标签： javascriptjquery

Answer 1

您的代码所做的是选择将显示的卡片（“随机”）。如果您想显示所有四张牌并只是洗牌，则必须随机重新定位它们。

https://css-tricks.com/snippets/jquery/shuffle-children/

$.fn.shuffleChildren = function() {
$.each(this.get(), function(index, el) {
    var $el = $(el);
    var $find = $el.children();

    $find.sort(function() {
        return 0.5 - Math.random();
    });

    $el.empty();
    $find.appendTo($el);
});

};