隨機函數隨機化字母

Question

我是新來的，需要幫助。我有一個shuffle函數，通過按下class="reset"的重置按鈕原因調用img標籤，我需要知道如何從開始加載它。我的意思是當我加載這個頁面時，像onload=""body標籤，因爲當我第一次看這頁時，字母按字母順序出現，我需要從頭開始洗牌。

這是HTML代碼：

<div id="container" class='columns'> 
    <div class="column" draggable="true"><header>A</header></div> 
    <div class="column" draggable="true"><header>B</header></div> 
    <div class="column" draggable="true"><header>C</header></div> 
    <div class="column" draggable="true"><header>D</header></div> 
    <div class="column" draggable="true"><header>E</header></div> 
    <div class="column" draggable="true"><header>F</header></div> 
    <div class="column" draggable="true"><header>G</header></div> 
    <div class="column" draggable="true"><header>H</header></div> 
    <div class="column" draggable="true"><header>I</header></div> 
    <div class="column" draggable="true"><header>J</header></div> 
    <div class="column" draggable="true"><header>K</header></div> 
    <div class="column" draggable="true"><header>L</header></div> 
    <div class="column" draggable="true"><header>M</header></div> 
    <div class="column" draggable="true"><header>N</header></div> 
    <div class="column" draggable="true"><header>O</header></div> 
    <div class="column" draggable="true"><header>P</header></div> 
    <div class="column" draggable="true"><header>Q</header></div> 
    <div class="column" draggable="true"><header>R</header></div> 
    <div class="column" draggable="true"><header>S</header></div> 
    <div class="column" draggable="true"><header>T</header></div> 
    <div class="column" draggable="true"><header>U</header></div> 
    <div class="column" draggable="true"><header>V</header></div> 
    <div class="column" draggable="true"><header>W</header></div> 
    <div class="column" draggable="true"><header>X</header></div> 
    <div class="column" draggable="true"><header>Y</header></div> 
    <div class="column" draggable="true"><header>Z</header></div> 
    </div> 

<div class="buttons"> 
     <a href='#' ><img class="reset" src="images/resetBtn.png" title="Resetare" ></a> 
</div> 

JS：

jQuery(function($){ 

    $('img.reset').click(function(){ 
     $('#container').shuffle(); 
    }); 
}); 


(function($){ 

    $.fn.shuffle = function() { 
     return this.each(function(){ 
      var items = $(this).children().clone(true); 
      return (items.length) ? $(this).html($.shuffle(items)) : this; 
     }); 
    }; 

    $.shuffle = function(arr) { 
     for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); 
     return arr; 
    }; 

})(jQuery); 

Answer 1

添加一行

$(document).ready(function() { $('#container').shuffle(); }); 

Answer 2

寫.shuffle在文件準備好了！

$(document.ready(function() { 
    //register fn.shuffle 
    $('#container').shuffle(); //shuffle on document ready 
    $('img.reset').click(function(){ 
     $('#container').shuffle(); 
    }); 
}); 

或者，如在評論中提到@billyonecan，你可能會引發單擊事件，所以，如果你想要做的文件準備好更多的東西，你就可以搞定。

替代方案：

$(document.ready(function() { 
    $('img.reset').trigger("click"); //Handling shuffle + more stuff 
    $('img.reset').click(function(){ 
     $('#container').shuffle(); 
     //Do some other stuff. 
    }); 
});