прототип вопрос hasclassname

Question

У меня есть список уль:

<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)}. Вы не назначаете функцию на номер onComplete, но сразу же вызываете oncom(this), а затем присваиваете ее результат onComplete - и результат равен нулю.

Если container содержит список меню, то он также будет заменен (возможно, вы воссоздаете обработчики кликов). Подумайте, используя один раз Event.on, так что вновь вставленные элементы ведут себя правильно.

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

считают также, что, если все, что вы делаете, манипулируя имена классов вы можете сделать это на сервере, когда AJAX используется, что позволит избежать проблем гонки.

Answer 2

Причина, по которой она не работает, пока вы не нажмете первый элемент, состоит в том, что функция oncom содержит элемент наблюдения для элементов li, и вы не используете этот код, пока не нажмете на него. Вам нужно избавиться от материала onClick в html, если это возможно. Просто запустите этот код при загрузке страницы, и он незамедлительно соблюдает лики:

$$('#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));