mootools 类名未定义

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>

这应该突出显示单击的按钮并以某种方式隐藏其他按钮。问题是我输入each后无法立即获取元素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/

要回答您的问题不过原来的问题。尽管当前 mootools 返回了正确的元素对象，但情况并不总是如此。不要假设它会是这样，并且始终使用 api 来获取对象的属性，例如。 element.get("class") 与 el.className - 它也进行浏览器差异映射。值、文本等也是如此 - 只要约束自己使用 API，否则您将无法升级到 mootools 2.0