La potencia de JQuery

Me encuentro en el blog de jquery, este interesante reto: Encontrar todos los “li” bajo dos elementos diferentes (usando su id como referencia) y asignar una funcion al evento onClick de los mismos que cambie el color del texto de los “li”. Suena un poco lioso… :P

Estas son las distintas formas de resolverlo usando las librerías javascript más populares:

Behaviour + Prototype

Behaviour.register({
  '#item li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  },

  '#otheritem li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  }
});

Prototype 1.5.0

$$('#item li, #otheritem li').each(function(li){
  Event.observe(li, 'click', function(event) {
    Event.element(li).setStyle({color: '#c00'});
  });
});

Event:Selectors

EventSelectors.start({
  '#item li:click, #otheritem li:click': function(){
    this.setStyle({'color': '#c00'});
  }
});

JQuery

$("#item li, #otheritem li").click(function(){
  this.css('color', '#c00');
});

La verdad es que me he quedado impresionado con la simplicidad de la solución generada con JQuery. Creo que el código habla por sí mismo…

Escrito por manuel el miércoles 3 de mayo 2006
Guardado en AJAX, Programacion