Получение класса элемента, вызвавшего событие, с помощью JQuery

82

есть ли способ получить класс при срабатывании события щелчка. Мой код, как показано ниже, работает только для идентификатора, но не для класса.

$(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>
Развернуть фрагмент

код jsfiddle здесь

javascript javascript-events jquery Redbox
источник
11
Класс - это зарезервированная работа в ECMAScript, поэтому атрибут класса сопоставляется со classNameсвойством DOM. Используйте event.target.className.
RobG

Ответы:

138

Пытаться:

$(document).ready(function() {
    $("a").click(function(event) {
       alert(event.target.id+" and "+$(event.target).attr('class'));
    });
});
брошка
источник
110

Он будет содержать полный класс (который может быть несколькими классами, разделенными пробелами, если элемент имеет более одного класса). В вашем коде он будет содержать либо «конбо», либо «кинта»:

event.target.className

Вы можете использовать jQuery для проверки классов по имени:

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

и добавить или удалить их с помощью addClass и removeClass .

Павел
источник
21

Вы получите весь класс в массиве ниже

event.target.classList
Вишеш Мишра
источник
Я считаю этот ответ более полезным по сравнению с ответом @ broesch. У него меньше зависимостей, и на данный момент он кажется более естественным.
Коксер
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>
Развернуть фрагмент

У меня это работает. В jQuery нет функции event.target.class.

Drjay
источник
по какой-то причине я должен использовать событие, в любом случае спасибо за ответ. Брош ответил, что мне нужно.
Redbox
1

Если вы используете jQuery 1.7:

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

или же:

alert($(event.target).prop("class"));
Эван Мулавски
источник
0

Осторожно target, хотя может не работать со всеми браузерами, он хорошо работает с Chrome, но я считаю, что Firefox (или IE / Edge, не помню) немного отличается и использует srcElement. Я обычно делаю что-то вроде

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

таким образом приводя к

$(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'));
    });
});

Спасибо за хорошие ответы!

ПЗУ
источник
targetработает с Firefox, потребуется IE / EdgesrcElement
Hassan Baig