Отримання класу елемента, який запускає подію за допомогою JQuery

Question 1

чи є в будь-якому випадку отримати клас при запуску події кліку. Мій код, як показано нижче, працює лише для ідентифікатора, але не для класу.

$(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 тут

Question 2

Спробуйте:

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

Question 3

Він міститиме повний клас (який може бути декількома класами, розділеними пробілами, якщо елемент має більше одного класу). У вашому коді він міститиме "konbo" або "kinta":

event.target.className

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

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

і додати або видалити їх за допомогою addClass і removeClass .

Question 4

Ви отримаєте весь клас у нижчому масиві

event.target.classList

Question 5

$(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.

Question 6

Якщо ви використовуєте jQuery 1.7:

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

або:

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

Question 7

Обережно, оскільки це 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'));
    });
});

Thx за приємні відповіді!