如何获取随机播放函数的输出并在 DOM 个元素周围移动？

Question

所以我有这个 HTML:

 <ul class="deck">
        <li class="card">
            <i class="fa fa-diamond"></i>
        </li>
        .....(16 total list items here)
    </ul>

还有这个javascript：

const arrayOfCards = $('.card');

function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;

while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
}
return array;
}
shuffle(arrayOfCards);

那个函数拿牌（这是一个卡片记忆游戏）并洗牌，但它不会四处移动...我需要以某种方式四处移动卡片，我不知道该怎么做它。我应该从 jQuery 动态创建卡片（列表项），而不是 HTML 还是什么？我真的很困惑。

Answer 1

jQuery 解法：

// Add a shuffle() function to extend $() (jQuery) elements.
$.fn.shuffle = function() {
    // Fetch all elements in selection,
    var allElems = this.get(),
        getRandom = function(max) { //temporary function for in-house use
            // return a random value below a max value
            return Math.floor(Math.random() * max);
        },
        //shuffle elements...
        shuffled = $.map(allElems, function(){
            //loop through each element in selection (array)

            // calculate a new random value, which is smaller than the selection size
            var random = getRandom(allElems.length),
            // clone random element in selection (array). this will be the new element at this current point in the array
                randEl = $(allElems[random]).clone(true)[0];
            // remove random element from it's original point in the array
            allElems.splice(random, 1);
            // return this random element, to be positioned at this point in the array. $.map will do this work for us
            return randEl;
       });
    //now we loop through our selection and individually update its order to match our shuffled version
    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });
    // return references to our new shuffled selection
    return $(shuffled);

};

用法：

var shuffled_selection = $('.deck .card').shuffle();
// select all .card elements under parent elements with class .deck
// and then shuffle the dom (directly). shuffled_selection = final result

来源： https://j11y.io/snippets/shuffling-the-dom/

一个工作示例：https://jsfiddle.net/qLyoxhkL/

Answer 2

您需要将排序后的数组追加到 dom。您目前正在做的只是对恰好包含元素的数组进行排序，但排序后的数组不会自动更改 dom

这是一个非常简单的洗牌方法。

var $deck = $('.deck'),
  $cards = $deck.children();

$('button').click(function() {
  // sort the elements
  $cards.sort(function() {return Math.random() - .5; });
  // update dom with new sort
  $deck.append($cards);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="deck">
  <li class="card">1</li>
  <li class="card">2</li>
  <li class="card">3</li>
  <li class="card">4</li>
  <li class="card">5</li>
  <li class="card">6</li>
  <li class="card">7</li>
  <li class="card">8</li>
  <li class="card">9</li>
  <li class="card">10</li>
</ul>

<button>Shuffle</button>

如何获取随机播放函数的输出并在 DOM 个元素周围移动？

How do I take the output from a shuffle function and moves around DOM elements?

javascript

arrays

jquery

shuffle