Obtener la clase del elemento que disparó un evento usando JQuery

82

¿Hay alguna forma de obtener la clase cuando se activa el evento de clic? Mi código de la siguiente manera, solo funciona para id pero no para clase.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

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

</html>

Expandir fragmento

código jsfiddle aquí

javascript javascript-events jquery

— Redbox
fuente

11

La clase es un trabajo reservado en ECMAScript, por lo que el atributo de clase se asigna a la classNamepropiedad DOM. Utilice event.target.className.

— RobG

138

Tratar:

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

— broesch
fuente

110

Este contendrá la clase completa (que puede ser varias clases separadas por espacios, si el elemento tiene más de una clase). En su código contendrá "konbo" o "kinta":

event.target.className

Puede usar jQuery para buscar clases por nombre:

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

y para agregarlos o eliminarlos con addClass y removeClass .

— Pablo
fuente

21

Obtendrá toda la clase en la siguiente matriz

event.target.classList

— Vishesh Mishra
fuente

Encuentro esta respuesta más útil en comparación con la de @ broesch. Tiene menos dependencias y parece más natural en este punto.

— Coxer

3

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

<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>
</body>

</html>

Expandir fragmento

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

— drjay
fuente

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

— Redbox

1

Si está utilizando jQuery 1.7:

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

o:

alert($(event.target).prop("class"));

— Evan Mulawski
fuente

0

Cuidado, ya que targetpodría no funcionar con todos los navegadores, funciona bien con Chrome, pero creo que Firefox (o IE / Edge, no puedo recordar) es un poco diferente y usa srcElement. Normalmente hago algo como

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

lo que lleva 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'));
    });
});

¡Gracias por las buenas respuestas!

— ROM
fuente

targetfunciona con Firefox, IE / Edge necesitaríasrcElement

— Hassan Baig