原型hasclassname问题

时间:2012-01-06 12:16:16

标签: javascript javascript-events prototypejs

我有一个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));
            }

但是它没有使当前链接影响该类,但是当我点击下一个链接时它会生效。怎么解决这个问题?

2 个答案:

答案 0 :(得分:0)

您传递给更新程序的选项是{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时在服务器上执行此操作,这样可以避免竞争问题。

答案 1 :(得分:0)

在单击第一个项目之前它不起作用的原因是因为oncom函数包含li元素的observe,并且在单击一个之前您没有运行该代码。如果可能的话,你需要摆脱html中的onClick东西。只需在页面加载时运行此代码,它就会立即观察到li:

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