javascript - 设置默认元素以显示 onload - mootools

Question

我通过 http://mrpaolo.github.io/mootools30days/20.html 找到了这段代码

var showFunction = function() {
   $$('.hidden').setStyle('display', 'none'); 
   this.setStyle('display', 'block');
}


window.addEvent('domready', function() {
   var elOneB = $('contentoneB');
   var elTwoB = $('contenttwoB');
   var elThreeB = $('contentthreeB');

   $('oneB').addEvent('click', showFunction.bind(elOneB));
   $('twoB').addEvent('click', showFunction.bind(elTwoB));
   $('threeB').addEvent('click', showFunction.bind(elThreeB));
});

我想让其中一个元素默认显示 onload。这可行吗？

Answer 1

该代码非常严格。其中很多教程都非常糟糕/过时/与最佳实践脱节。

无论如何，你应该转换为不太干燥的东西。要使其按原样工作，您可以执行以下操作:

$('twoB').fireEvent('click');

但是你确实应该重构一些不与 ids 和硬隐式绑定(bind)或内联 CSS 样式等耦合的东西。

(function(){
    var contentDivs = document.getElements('div.content');
    document.getElements('button.button-control').addEvent('click', function(e){
        contentDivs.addClass('hide');
        document.getElement('div.content.' + this.get('data-content')).removeClass('hide');
    });

}());

// pick one to show
document.getElement('button').fireEvent('click');

这个 dom 为:

<button class="button-control" data-content="content-one">one</button>
<button class="button-control" data-content="content-two">two</button>
<button class="button-control" data-content="content-three">three</button>

<div class="content hide content-one">
    one
</div>
<div class="content hide content-two">
    two
</div>
<div class="content hide content-three">
    three
</div>

和CSS

.hide { 
    display: none; 
}

http://jsfiddle.net/dimitar/a7K4c/ - 它将允许您通过简单地修改标记而无需触摸代码来轻松添加更多项目。