MooTools Fx.Slide抛出this.element为空

时间:2010-03-05 19:33:07

标签: javascript mootools

以下代码抛出错误“this.element为null”。但是,wid_cont肯定会抓住一个元素。

window.addEvent('domready',function(){
 var min = $(document.body).getElements('a.widget_minimize');
 min.addEvent('click',
  function(event){
   event.stop();
   //var box = ;
   var wid_cont = ($(this).getParents('.widget_box').getElement('.widget_box_content_cont'));
   var myVerticalSlide = new Fx.Slide(wid_cont);
   myVerticalSlide.slideOut();
  }
 );
});

这是moo工具1.2.4并且包含了fx.slide ....

1 个答案:

答案 0 :(得分:1)

它不返回单个元素,而是返回由getParents()引起的数组以及其他类似标记的元素,Fx.Slide要求您将其传递给单个元素。

此处在传递数组的第一项时至少部分工作:http://www.jsfiddle.net/KFdnG/

但是,如果您有很长的项目列表并且只需要展开特定的内容层,那么这是无效且难以管理的,您希望保持对内容层的查找更加本地化。

这样的事情: http://www.jsfiddle.net/KFdnG/4/

// store an instance into each content div and set initial state to hidden.
$$("div.widget_box_content_cont").each(function(el) {
    el.store("fxslide", new Fx.Slide(el).hide());
});

$$('a.widget_minimize').addEvent('click', function(event) {
    event.stop();
    // can't use this.getNext() due to wrapper by Fx.Slide which does not have the instance.
    this.getParent().getElement("div.widget_box_content_cont").retrieve("fxslide").toggle();
});

适用于标记:

<div class="widget_box">
    <div class="widget_box_content">
        <a href="#" class="widget_minimize">link</a>
        <div class="widget_box_content_cont">
            some content
        </div>
    </div>
    <div class="widget_box_content">
        <a href="#" class="widget_minimize">link 2</a>
        <div class="widget_box_content_cont">
            some content 2
        </div>
    </div>    
</div>  

这也更好,因为您不会在每次点击时创建Fx.Slide类的新实例,但会引用已附加到元素的实例。