Question

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

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模型有些奇怪，也许是因为元素是动态创建的？我整天都在这里，而且我已经烧坏了......

Answer 1

我假设.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()的回调设置时，它们都引用< em>相同 $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，你只需将它作为参数传递给函数。

Answer 2

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

boxBottom = document.createElement('boxBottom'),

createElement 的参数应该是有效的标记名称。

DOM元素的行为不符合预期。

2 个答案: