0

いくつかのリンク内に一連の画像があります

<a href="#" class="flipdown 1">
<img class="bottom" src="numbers/numbers_01.png" /> </a>
<a href="#" class="flipdown 2">
<img class="bottom" src="numbers/numbers_02.png" /> </a>
<a href="#" class="flipdown 3">
<img class="bottom" src="numbers/numbers_03.png" /> </a>
<a href="#" class="flipdown 4">
<img class="bottom" src="numbers/numbers_04.png" /> </a>

ページが読み込まれるたびに、これを使用して各リンクをごちゃ混ぜにします

(function($) {
$.fn.randomize = function(childElem) {
  return this.each(function() {
     var $this = $(this),
         elems = $this.children(childElem);

  elems.sort(function() { return (Math.round(Math.random())-0.5); });  
  $this.empty();  
  for(var i=0; i < elems.length; i++)

    $this.append(elems[i]);      

  });    
 }
});

次に、順番に並べられた別の画像のセットがあり、それらをごちゃ混ぜのリンク内に追加したいが、順番を維持したい。だから私はこのように見えるものを持っています。

<a href="#" class="flipdown 4">
<img class="bottom" src="numbers/numbers_04.png" /> 
<img class="top" src="letters/letters_01.png" />
</a>
<a href="#" class="flipdown 2">
<img class="bottom" src="numbers/numbers_02.png" />
<img class="top" src="letters/letters_02.png" />
</a>
<a href="#" class="flipdown 1">
<img class="bottom" src="numbers/numbers_01.png" />
<img class="top" src="letters/letters_03.png" />
</a>
<a href="#" class="flipdown 3">
<img class="bottom" src="numbers/numbers_03.png" /> 
<img class="top" src="letters/letters_04.png" />
</a>

そのため、ページが読み込まれるたびに、文字の画像は順番どおりに表示されますが、数字はごちゃごちゃになります。私がこれまでに試したことはすべて建設的ではありませんでした!

4

1 に答える 1

1

letterこのように for ループに画像を動的に追加できます。

var letterNumber;
for(var i=0; i < elems.length; i++){
    letterNumber = i+1;
    if(letterNumber.toString().length == 1)
        letterNumber = '0'+letterNumber.toString();
    $(elems[i]).append('<img class="top" src="letters/letters_'+letterNumber+'.png" />');
    $this.append(elems[i]); 
}
于 2013-11-06T16:57:56.413 に答える