JQueryを使用してイベントを発生させた要素のクラスを取得する

Question 1

クリックイベントが発生したときにクラスを取得する方法はありますか。以下の私のコードは、idに対してのみ機能し、classに対しては機能しません。

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

いい答えをありがとう！