Saltar al contenido

Javascript/jQuery: ¿cómo obtengo el nombre de la clase del elemento en el que se hizo clic?

Después de investigar en diversos repositorios y páginas webs de internet finalmente descubrimos la resolución que te compartimos aquí.

Solución:

En jQuery, si adjunta un click evento para todos

etiquetas (por ejemplo), puede obtener su clase de esta manera:

Ejemplo: http://jsfiddle.net/wpNST/

$('div').click(function() 
    var theClass = this.className;  // "this" is the element clicked
    alert( theClass );
);

Esto usa jQuery .click(fn) método para asignar el controlador, pero acceda al className propiedad directamente desde el elemento DOM en el que se hizo clic, que está representado por this.

Hay métodos jQuery que también hacen esto, como .attr().

Ejemplo: http://jsfiddle.net/wpNST/1/

$('div').click(function() 
    var theClass = $(this).attr('class');
    alert( theClass );
);

Aquí envolví el elemento DOM con un objeto jQuery para que pueda usar los métodos disponibles por jQuery. los .attr() El método aquí obtiene la clase que se estableció.

Este ejemplo funcionará en todos los elementos de la página. recomendaría usar console.log(event) y hurgando en lo que descarga en su consola con las herramientas Firebug/Developer.

jQuery

​$(window).click(function(e) 
    console.log(e); // then e.srcElement.className has the class
);​​​​

JavaScript

window.onclick = function(e) 
    console.log(e); // then e.srcElement.className has the class
​

Pruébalo

http://jsfiddle.net/M2Wvp/

Editar

Para aclarar, no tiene que iniciar sesión en la consola para el e.srcElement.className tener la clase, espero que eso no confunda a nadie. Está destinado a mostrar que dentro de la función, tendrá el nombre de la clase.

$(document).click(function(e)
    var clickElement = e.target;  // get the dom element clicked.
    var elementClassName = e.target.className;  // get the classname of the element clicked
);

esto admite hacer clic en cualquier parte de la página. si el elemento en el que hizo clic no tiene un nombre de clase, devolverá null o vacío string.

Sección de Reseñas y Valoraciones

Recuerda que te brindamos la opción de añadir un enjuiciamiento acertado .

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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