Question

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

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

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

任何人都可以帮我关闭。

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

Answer 1

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

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

而不是

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

fiddle

在Javascript循环中关闭

1 个答案: