data-atribute

El atributo data es muy útil para trabajar con el DOM y javaScript.

Seurat

archivado en: JavaScript / 17 agosto, 2014

A la que se haya realizado alguna página web en la que se haya trabajado con complejidad el DOM con javaScript, seguro que se ha utilizado alguna clase para almacenar datos. Por ejemplo, en un listado de libros de los que queremos saber si están disponibles o no, algo así:

<div class="libros libroNoDisponible" >Soy un libro</div>

<div class="libros  libroDisponible" >Soy otro libro</div>

Para luego hacer algo parecido a esto:

$('.libros').click(function() {

if ( $(this).hasClass('libroDisponible')  ) {

alert('El libro está disponible)

}

});

Otro truco habitual para guardar datos que necesitamos para lo que sea y que no deben visualizarse por el usuario es almacenarlos en el id del tag, ya sea guardando el valor directamente o añadiéndolo después de algún símbolo que sea fácil de splitear, como el guion bajo.

<div class="libros" id="idLibroTal_0" >Soy un libro</div>

<div class="libros" id="idLibroCual_1" >Soy otro libro</div>

...

$('.libros').click(function() {

var disponible = $(this).attr('id').split('_');

alert(disponible[1]);

});

Sin embargo, hay otra solución mucho más elegante para guardar datos en los tags de HTML y es utilizar el atributo data-*. Este atributo se forma uniendo al término « data-» un nombre cualquiera, que por legibilidad conviene sea lo más descriptivo posible del valor que recoge. Por ejemplo, en nuestro caso:

<div class="libros"  data-disponible="0">Soy un libro</div>

<div class="libros"  data-disponible="1">Soy otrolibro</div>

Y luego se puede trabajar con jQuery como cualquier otro atributo:

$(".libros").click(function() {

var disponible = $(this).attr('data-disponible');

alert(disponible);

});

Al igual que sucede con puro javaScript:

function libroDisponible() {

var disponible = this.getAttribute('data-disponible');

alert(disponible);

}

var libros = document.getElementsByClassName('libros');

for (var i = 0; i < libros.length; i++) {

libros[i].addEventListener("click", libroDisponible, false);

}

¿Está chulo, no?

(Ver demo en plunker)

|| Tags: , , ,

valoración de los lectores sobre data-atribute

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.