mootools的類名未定義

我真的不明白爲什麼這段代碼將無法正常工作：mootools的類名未定義

$$('.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。該警報給我「未定義」。有人嗎？

來源

2011-09-23 Bradley Cooper

這將很難按比例/模式。

考慮這樣的事情：

(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") vs el.className - 它也執行瀏覽器差異映射。相同的價值，文字等 - 只是訓練你的自我使用的API或者你將無法升級到mootools 2.0

來源

2011-09-23 08:57:37

thx爲您的答案Dimitar。它的工作原理，我也會更新我的代碼的其餘部分。 –

哦，我想問你爲什麼你改變原來的'$$（'。nav_contact'）''document.getElements（「a.nav_contact」）' –

我不喜歡$$ :)在過去的日子它是'this.document.getElements（）'的別名，它可能在不同的執行上下文中行爲不當。代碼應該更具有口頭性和自我解釋性，所以如果有人進來看看它沒有mootools的經驗，他們不需要知道$$做什麼並且可以理解代碼。 –

mootools的類名未定義

回答

相關問題