Mootools注入克隆元素

我需要克隆一個元素，一旦頁面調整大小覆蓋當前存在的元素。Mootools注入克隆元素

我當前的代碼，不工作如下：

var clone = false; 
window.addEvent("domready",function(){ 
    clone = $$('.view').clone(); 
    /* Wait for images to be 100% loaded otherwise they might not have width/height */ 
    var lazyloader = new LazyLoad({ 
     onComplete: function(){ 
      setupWall(); 
      window.addEvent('resize:throttle(1000)', function(){ 
       /* Delete old viewport and add back with cloned version */ 
       var view = $$('.view'); 
       if(view){ 
        wall = null; 
        view.dispose(); 
       } 
       var cloneElement = $$('#wrapper').inject(clone); 
       console.log(cloneElement); 
       //setupWall(); 
      }); 
     } 
    }); 
});

當$$('#wrapper').inject(clone);運行出現以下錯誤：

Cannot call method 'appendChild' of null

如這裏的意見建議是HTML以及。

<div id="wrapper"> 
    <section class="view" id="wall"> 
     <div class="panel" id="panel1"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/701/310" /></div> 
     <div class="panel" id="panel2"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/702/320" /></div> 
     <div class="panel" id="panel3"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/703/330" /></div> 
     <div class="panel" id="panel4"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/704/340" /></div> 
     <div class="panel" id="panel5"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/705/350" /></div> 
     <div class="panel" id="panel6"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/706/360" /></div> 
     <div class="panel" id="panel7"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/707/370" /></div> 
     <div class="panel" id="panel8"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/708/380" /></div> 
     <div class="panel" id="panel9"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/709/390" /></div> 
     <div class="panel" id="panel10"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/710/400" /></div> 
     <div class="panel" id="panel11"><img src="_assets/images/loading.gif" data-src="http://placekitten.com/711/410" /></div> 
    </section> 
</div>

來源

2013-02-27 CharliePrynn

沒有HTML這是任何人都難以調試或查看的內容與你的代碼發生。錯誤消息表明$$（'＃wrapper'）與頁面中的元素不匹配。 – Marryat 2013-02-27 14:30:54

感謝您的建議，我已經將該html添加到OP。 – CharliePrynn 2013-02-27 14:34:12

$$()返回一個集合。如果你真的想要一個元素，你不應該克隆一個集合。

如果您的意思是通過ID獲取單個元素，請使用$("id"); - 如果是選擇器，document.getElement('.class')（或任何node.getElement）。 $不像jquery，更像是document.getElementById()。

而且，element.inject(target) - 單報，不收集 - VS target.adopt(element(s))

window.addEvent("domready",function(){ 
    var clone = document.getElement('.view').clone(); 
    /* Wait for images to be 100% loaded otherwise they might not have width/height */ 
    var lazyloader = new LazyLoad({ 
     onComplete: function(){ 
      setupWall(); 
      window.addEvent('resize:throttle(1000)', function(){ 
       /* Delete old viewport and add back with cloned version */ 
       var view = $$('.view'); 
       if(view.length){ 
        wall = null; 
        view.destroy(); 
       } 
       var cloneElement = $('wrapper').adopt(clone); 
       console.log(cloneElement); 
       //setupWall(); 
      }); 
     } 
    }); 
});

來源

2013-02-27 17:13:23

Mootools注入克隆元素

回答

相關問題