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注入克隆元素

回答

相关问题