2012-06-14 7 views
54

de todos modos existe para obtener la clase cuando se activa el evento de clic. Mi código como a continuación, solo funciona para id pero no para clase.Obtener la clase del elemento que desencadenó un evento utilizando JQuery

html:

<html> 
<body>  
<a href="#" id="kana1" class="konbo">click me 1</a> 
<a href="#" id="kana2" class="kinta">click me 2</a> 
</body> 
</html> 

JQuery:

$(document).ready(function() { 
    $("a").click(function(event) { 
     alert(event.target.id+" and "+event.target.class); 
    }); 
}); 

código jsFiddle here

+11

La clase es un trabajo reservado en ECMAScript, por lo que el atributo de clase se asigna a la propiedad DOM 'className'. Use 'event.target.className'. – RobG

Respuesta

103

Probar:

$(document).ready(function() { 
    $("a").click(function(event) { 
     alert(event.target.id+" and "+$(event.target).attr('class')); 
    }); 
}); 
71

Este contendrá la clase completa (que puede ser mult iple clases separadas por espacio, si el elemento tiene más de una clase). En su código contendrá ya sea "konbo" o "Kinta":

event.target.className 

Puede usar jQuery para comprobar si hay clases por su nombre:

$(event.target).hasClass('konbo'); 

y para añadir o quitar con addClass y removeClass .

+5

+1 para '.className'. –

1

Si está utilizando jQuery 1.7:

alert($(this).prop("class")); 

o:

alert($(event.target).prop("class")); 
1
<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    </head> 
<body>  
<a href="#" id="kana1" class="konbo">click me 1</a> 
<a href="#" id="kana2" class="kinta">click me 2</a> 

<script> 
    $(document).ready(function() { 
    $("a").click(function(event) { 
     var myClass = $(this).attr("class"); 
     var myId = $(this).attr('id'); 
     alert(myClass + " " + myId); 
    }); 
}) 
</script>> 
</body> 
</html> 

Esto funciona para mí. No hay función event.target.class en jQuery.

+0

por alguna razón tengo que usar el evento, de todos modos, gracias por la respuesta. Broesch ha respondido lo que necesito. – Redbox

0

Tener en cuenta que target podría no funcionar con todos los navegadores, funciona bien con Chrome, pero creo que Firefox (o IE/Edge, no recuerdo) es un poco diferente y usa srcElement. Yo suelo hacer algo así como

var t = ev.srcElement || ev.target; 

lo que conduce a

$(document).ready(function() { 
    $("a").click(function(ev) { 
     // get target depending on what API's in use 
     var t = ev.srcElement || ev.target; 

     alert(t.id+" and "+$(t).attr('class')); 
    }); 
}); 

Thx por las respuestas agradables!

Cuestiones relacionadas