原型js库初学者

Question

I have a list in which I am dynamically adding the classname, now when I click on that item again the class stays there. I dont want that I want that classname to be assigned to the currently clicked list item.

<ul id="menubar">

<li>one</li>
<li>two</li>
</ul>

Now when I click on one I dynamically add classname, and when I click on two the classname stays the same on one and it gets affected on two as well. but I want it to be removed from one and to be applied to currently clicked item.

How can I achieve it?

Answer 1

$$('#menubar li').invoke('observe', 'click', (function(e) {
  //removes classname from all the li elements
  $$('#menubar li').invoke('removeClassName', 'myClass'); 
  //Gets the li you clicked on
  var list_item = Event.element(e);
  //adds the classname
  list_item.addClassName('myClass');
}).bindAsEventListener(this));

Answer 2

You need to be including .removeClass() in the same event as when you addClass() to the other one.

$('.one').click(function(){
  $(this).addClass('myClass');
  $('.two').removeClass('myClass');
});

This could be written more efficiently, but im writing this in between meetings.

Hope it's a start!