Question

我正在开发一个新的网站，我们希望在文档中使用特定的Class Shuffle对一组DIV元素进行随机播放：

(function($){

$.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

};

})(jQuery);

我的DIV元素看起来像这样：

<div class="row animate-in shuffle" data-anim-type="fade-in-up">
            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                <div class="team-wrapper">
                    <div class="team-inner" style="background-image: url('assets/img/team/1.jpg')">
                        <!-- <a href="#" target="_blank" > <i class="fa fa-twitter" ></i></a> -->
                    </div>
                    <div class="description">
                        <h3> Test User 1</h3>
                        <h5><strong> Tester - Inhaber </strong></h5>
                        <p>
                            fon: 1234567890<br>
                            <a href="mailto:test@test.de">e-mail: test@test.de</a><br>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                <div class="team-wrapper">
                    <div class="team-inner" style="background-image: url('assets/img/team/2.jpg')">
                        <!-- <a href="#" target="_blank" > <i class="fa fa-twitter" ></i></a> -->
                    </div>
                    <div class="description">
                        <h3> Test User 2</h3>
                        <h5><strong> Tester </strong></h5>
                        <p>
                            fon: 0987654321<br>
                            <a href="mailto:tester2@test.de">e-mail: tester2@test.de</a><br>
                        </p>
                    </div>
                </div>
            </div>
         </div>

这是我在加载网站时调用的内容：

$('div#shuffle div').shuffle();

元素仍然以与在文档中写入相同的方式被激怒。我的错误在哪里？

提前致谢：）

Answer 1

以下是如何解决问题的示例。从中学习并在自己的情况下实施。

FIDDLEJS

<强> HTML：

<div id="container">
  <div class="shuffleMe"> DIV 1</div>
  <div class="shuffleMe"> DIV 2</div>
  <div class="shuffleMe"> DIV 3</div>
  <div class="shuffleMe"> DIV 4</div>
  <div class="shuffleMe"> DIV 5</div>
  <div class="shuffleMe"> DIV 6</div>
</div>
<button onclick="shuffle()">
  SHUFFLE
</button>

<强> JS：

function shuffle() {
  var container = document.getElementById("container");
  var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('shuffleMe'));
    elementsArray.forEach(function(element){
    container.removeChild(element);
  })
  shuffleArray(elementsArray);
  elementsArray.forEach(function(element){
  container.appendChild(element);
})
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

Answer 2

您可以创建包含所有元素的数组，然后在单独的函数中渲染它们。此时，您只需要使用如下所示的内容对数组进行洗牌：

1) one(function(){two(three)}) 
2) one(two(three))

重新渲染父div。

javascript在DIV中随机播放DIV

2 个答案: