Question

我真的不明白为什么这段代码不起作用：

$$('.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。警报给我“未定义”。有谁？

Answer 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

mootools className undefined

1 个答案: