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…

Publicado por

manuel

Me dedico al desarrollo de aplicaciones. Principalmente trabajo con XHTML, CSS, Javascript, XML, JSON, PHP, MySQL, Linux/MacOS X y Flash actionscript. Intento siempre trabajar con estándares y simplificar el desarrollo y las aplicaciones finales con el objetivo de orientarlas al usuario (que sean útiles y faciliten el trabajo).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *