0

jsfiddle - http://jsfiddle.net/zE4Y7/

演示 - http://www.ttmt.org.uk/closure/

我有两个数组，一个包含短语，一个包含字体。我正在使用循环来创建 3 个包含<p>标签的 div。

在每一个<p>中，我从第一个数组中放置一个随机短语。然后每个<p>都使用第二个数组中的字体设置样式。首先<p>应该使用数组中的第一个字体，第二个第二<p>个字体等设置样式。

我的问题是所有短语的样式都使用数组中的最后一种字体。我想我知道它为什么会发生，我需要关闭它来阻止它。我正在尝试像这样关闭，但它不起作用。

任何人都可以帮助我关闭。

    <script>

      createFlags = function(){

        var text = ['Hello Sailor','Acid Test','Bear Garden','Botch A Job','Dark Horse','Face','IKEA','Jig'];

        var fonts = ['CALIBRI','CORBEL','SourceSans'];

        for(var i = 0; i<fonts.length; i++){
          var ranNum = Math.floor(Math.random()*text.length); 
          (function(n){
            $('#wrap').append('<div class="font"><p>'+text[ranNum]+'</p></div>').css({'font-family':fonts[n], 'font-size':'3em'});
          })(i);
        }

      }

      createFlags();

    </script>
4

1 回答 1

1

问题是.append返回的不是新元素，而是您附加的元素，因此您每次都设置父 div 的样式。做这个：

$('<div class="font"><p>'+text[ranNum]+'</p></div>').appendTo('#wrap')

代替

$('#wrap').append('<div class="font"><p>'+text[ranNum]+'</p></div>')

小提琴

于 2013-06-10T20:45:07.657 回答