Получение класса элемента, который активировал событие, используя JQuery

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

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);
    });
});

jsfiddle code здесь

Ответы

Ответ 1

Try:

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

Ответ 2

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

event.target.className

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

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

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

Ответ 3

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

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

или

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

Ответ 4

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

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

Ответ 5

Осторожно, поскольку 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 in use
        var t = ev.srcElement || ev.target;

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

спасибо для приятных ответов!