0

我似乎完全无法解决这个问题。当我运行这个循环时：

for ( var i=0; i < 10; i++ ) {
    var $items = $(balls()); 
    console.log($items);
    $container.imagesLoaded(function(){
        $container.append( $items ).masonry( 'appended', $items, true );
    });
}

第一项和最后一项都很好，它们看起来像：

<div class="box masonry-brick" id="resultBox" style="top: 0px; position: absolute; left: 0px; "><div><p>NAME</p><img src="pathtoimage.jpg"><boxbottom id="boxBottom">NUM%</boxbottom></div></div>

但其他 8 个不好，它们看起来像：

<div class="box" id="resultBox""><div><p>NAME</p><img src="pathtoimage.jpg"><boxbottom id="boxBottom">NUM%</boxbottom></div></div>

所以没有应用“砌体砖”类，这意味着它们没有被砌体处理。

同样相关的是：

function balls(){
    var boxes = [];
    $iterator -= 1;
    var box = document.createElement('div'),
        spacerdiv = document.createElement('div'),
        para = document.createElement('p'),
        img = document.createElement('img'),
        boxBottom = document.createElement('boxBottom'),
        name = document.createTextNode( $test[$iterator][1][2]['name'] ),
        percentage = document.createTextNode(Math.floor($test[$iterator][0]*100)+'%');

    box.className = 'box';
    box.id = 'resultBox';
    img.src= 'scripts/php/timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300';
    boxBottom.id='boxBottom';

    box.appendChild( spacerdiv );
    spacerdiv.appendChild( para);
    para.appendChild(name);
    spacerdiv.appendChild( img );
    spacerdiv.appendChild(boxBottom);
    boxBottom.appendChild(percentage);
    // add box DOM node to array of new elements
    return box;
}

我认为这里的 DOM 模型有些奇怪，可能是因为元素是动态创建的？
我整天都在这，我已经筋疲力尽了……

4

2 回答 2

2

我假设每次调用.imagesLoaded()都会绑定您的回调函数，以便稍后在实际加载图像之后异步运行。如果是这样，您可以将代码更改为以下内容：

for ( var i=0; i < 10; i++ ) {
   (function() {
       var $items = $(balls()); 
       console.log($items);
       $container.imagesLoaded(function(){
           $container.append( $items ).masonry( 'appended', $items, true );
       });
   })();
}

...因为 JS 没有块作用域，它只有函数作用域。因此，即使您将var语句放在循环内，您的$items变量实际上并不局限于循环的范围，并且当执行回调设置时，.imagesLoaded()它们都引用相同 $items的- 这将保持循环结束时的值。通过将您的代码包装在一个函数中（在这种情况下是一个立即执行的匿名函数表达式 -请注意()末尾$items的.imagesLoaded()$items

更高效的版本（因为它不会在每次迭代时创建一个新函数）：

function addBalls() {
   var $items = $(balls()); 
   console.log($items);
   $container.imagesLoaded(function(){
       $container.append( $items ).masonry( 'appended', $items, true );
   });
}
for ( var i=0; i < 10; i++ )
    addBalls();

无论哪种方式，如果您确实需要在循环中引用循环索引i，您只需将其作为参数传递给函数。

于 2012-07-26T00:55:20.177 回答
0

很可能这里发生了一些奇怪的事情：

boxBottom = document.createElement('boxBottom'),

createElement的参数应该是一个有效的标签名称。

于 2012-07-26T01:08:53.257 回答