Un uso adicional del método attr() de jQuery, para modificar atributos con el valor devuelto de una
función y borrar atributos de elementos de la página con removeAttr().
En el artículo anterior del Manual de jQuery ya comenzamos a explicar el método attr(), que pertenece al paquete de
funciones para modificación de atributos de cualquiera de los elementos de una página web. En esta ocasión nos
detendremos un uso adicionale del método attr(), que seguro nos resultarán útiles para mantener el control dinámico de los
atributos de las etiquetas HTML, con sus correspondientes ejemplos. Este uso que nos faltaba por ver nos servirá cuando
tenemos que asignar el valor de un atributo con la respuesta de una función Javascript.
Además veremos también en este artículo otro método relacionado que sirve para eliminar por completo un atributo de
cualquier elemento de la página, el método removeAttr().
Asignar un valor de atributo procesado por una función
Podemos también enviar una función para procesar el valor que queremos asignar a un atributo. Para ello enviamos a attr()
dos parámetros, el primero con el nombre del atributo y el segundo con la función que debe devolver el valor a asignar a
dicho atributo.
Para ilustrar este uso de attr() mostraremos un ejemplo en el que desde jQuery accedemos a los elementos INPUT de la
página que tienen la clase CSS "fecha" y le insertamos como texto a mostrar la fecha de hoy. Para obtener el día actual
necesitamos procesar cierto código Javascript y para ello crearemos una función que devuelve la cadena de texto con la
fecha.
$('input.fecha').attr("value", function(indiceArray){
//indiceArray tiene el índice de este elemento en el objeto jQuery
var f = new Date();
return f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear();
});
Para que se asimile mejor el uso de jQuery en una página, mostramos el código completo de este ejemplo.
<html>
<head>
<title>método attr</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.fecha').attr("value", function(indiceArray){
//indiceArray tiene el índice de este elemento en el objeto jQuery
var f = new Date();
return f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear();
});
});
</script>
</head>
<body>
<form>
<input type="text" class="fecha">
<input type="text" class="nofecha">
<input type="text" class="fecha">
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario