原型hasclassname問題

Question

我有一個UL列表：

<ul id="menubar"> 

<li onclick="ajx=new Ajax.Updater('container','schedule.php',{evalScripts:true,onComplete:oncom(this)})">one</li> 
<li onclick="ajx=new Ajax.Updater('container','schedule.php',{evalScripts:true,onComplete:oncom(this)})">two</li> 
</ul> 

這裏是回調函數：

function oncom(element){ 
      //$(element).addClassName('current'); 
      $$('#menubar li').invoke('observe', 'click', (function(element) { 
    //removes classname from all the li elements 
    // 
    var list_item = Event.element(element); 



    //Gets the li you clicked on 


    //adds the classname 
    if(!(list_item.hasClassName('current'))){ 
    list_item.addClassName('current'); 
    }else{ 
    $$('#menubar li').invoke('removeClassName', 'current'); 
    } 

}).bindAsEventListener(this)); 
      } 

但它不是製造具有該類的影響當前的鏈接，但是當我點擊下一個環節它的影響。如何解決這個問題？

Answer 1

要傳遞到更新的選項{evalScripts:true,onComplete:oncom(this)}。您沒有將函數oncom分配給onComplete，而是立即調用oncom(this)，然後將其結果分配給onComplete - 結果爲空。

如果container包含菜單欄列表那麼它也將被替換（可能是爲什麼你正在重新創建點擊處理程序）。考慮使用Event.on一次，以便新插入的元素行爲正確。

Event.on('container', 'click', '#menubar li', function(event, element) { 
    // manipulate class names here 
}); 

同時認爲，如果你正在做的是操縱類名，你可以做到這一點，在服務器上使用Ajax時，這將避免出現競爭問題。

Answer 2

原因它不工作，直到您單擊第一個項目是因爲oncom函數包含觀察的李元素，直到你點擊一個你沒有運行該代碼。如果可能的話，你需要去掉html中的onClick東西。只需運行該代碼時，頁面加載，它會觀察裏的直線距離：

$$('#menubar li').invoke('observe', 'click', (function(e) { 
    //Removes current class from all the li's 
    $$('#menubar li').invoke('removeClassName', 'current'); 
    //Add current class to the li clicked on 
    Event.element(e).addClassName('current'); 
    //Does whatever this does, without being in the onClick 
    new Ajax.Updater('container','schedule.php',{ 
     evalScripts:true 
    }); 
}).bindAsEventListener(this));