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 に答える