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 回答