我真的不明白为什么这段代码不起作用:
$$('.nav_contact').addEvent('click', function(){
if (this.getStyle('color') != '#ffc000') {
this.tween('color','#ffc000');
alert(this.className);
$$('.navigation').getElements('a').each(function(a) {
alert(a.className);
if (a.className != 'nav_contact') {
a.tween('color','#b2b1af');
}
});
}
});
这是相关的HTML:
<nav class="navigation">
<ul>
<li><a class="nav_foo">Portfolio</a></li>
<li><a class="nav_bar">Services</a></li>
<li><a class="nav_contact">Contact</a></li>
</ul>
</nav>
这应该突出显示单击的按钮,并以某种方式隐藏其他按钮。问题是,当我输入每个元素时,我不能很快获得元素className。警报给我“未定义”。 有谁?
答案 0 :(得分:1)
这将难以按比例缩放/模式。
考虑这样的事情:
(function() {
var navItems = $$(".navigation a");
document.getElements("a.nav_contact").addEvent("click", function() {
var self = this;
if (this.getStyle('color') != '#ffc000') {
this.tween('color', '#ffc000');
navItems.each(function(a) {
// more scalable - change all but the current one w/o special references.
if (a != self) {
a.tween('color', '#b2b1af');
}
return;
// or check if it has an implicit class name...
if (!a.hasClass("nav_contact"))
a.tween('color', '#b2b1af');
// or check if the only class name is matching...
if (a.get("class") != 'nav_contact')
a.tween('color', '#b2b1af');
});
}
});
})();
jsfiddle:http://jsfiddle.net/dimitar/V26Fk/
尽管回答你原来的问题。尽管CURRENTLY mootools返回一个合适的元素对象,但情况并非总是如此。不要以为它会并且总是使用api来获取对象的属性,例如。 element.get("class")
vs el.className
- 它也会执行浏览器差异映射。相同的价值,文本等 - 只是训练你自己使用API或你将无法升级到mootools 2.0