Como se puede ver, se está extrayendo el valor almacenado en el enlace actual, que recibe el evento. Con $(this) obtenemos
el objeto jQuery del elemento que ha recibido el evento, que es el enlace sobre el que se ha pulsado y no todos los enlaces.
Con el método data("midato"), invocado sobre $(this), obtenemos el valor del dato "midato" almacenado en el enlace que
fue pulsado solamente.
Luego se muestra un mensaje para indicar el valor que había en el dato. Pero claro, este código, como es común para todos
los enlaces, tiene que acceder también a $(this) para saber qué enlace en concreto fue el que se pulsó. Para identificar el
enlace se hace $(this).attr("id"), que devuelve el atributo "id" del enlace sobre el que se hizo clic.
A continuación se puede ver el código completo de esta página.
<html>
<head>
<title>Ejemplos de uso de la función data del core de jQuery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a").click(function(evento){
evento.preventDefault();
valorAlmacenado = $(this).data("midato");
$("#mensaje").html("En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como
" + valorAlmacenado);
});
$("#guardar").click(function(evento){
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor
"mivalor"');
});
$("#guardarenlace1").click(function(evento){
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro
valor"');
});
});
</script>
</head>
<body>
<a href="#" id="enlace1">Enlace 1</a>
<br>
<a href="#" id="enlace2">Enlace 2</a>
<br>
<a href="#" id="enlace3">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<button id="guardar">guardar "midato" con valor "mivalor" en todos los enlaces</button>
<br>
<button id="guardarenlace1">guardar "midato" con valor "otro valor" en el enlace 1</button>
</body>
</html>
Si se desea, se puede ver el ejemplo en marcha en una página aparte. ht
No hay comentarios:
Publicar un comentario