1

私はここに来たばかりで、少し助けが必要です。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);
4

2 に答える 2

1

行を追加

$(document).ready( function() { $('#container').shuffle(); } );
于 2013-10-28T15:40:27.833 に答える
1

.shuffle書類への書き込みもOK！

$(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.
    });
});
于 2013-10-28T15:40:55.597 に答える