1

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

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

4

1 回答 1

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

于 2011-09-23T08:57:37.793 回答