87

クリックイベントが発生したときにクラスを取得する方法はありますか。以下の私のコードは、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コード

4

7 に答える 7

146

試す：

$(document).ready(function() {
    $("a").click(function(event) {
       alert(event.target.id+" and "+$(event.target).attr('class'));
    });
});
于 2012-06-14T02:59:19.937 に答える
124

これには完全なクラスが含まれます（要素に複数のクラスがある場合は、スペースで区切られた複数のクラスになる可能性があります）。コードには、「konbo」または「kinta」のいずれかが含まれます。

event.target.className

jQueryを使用して、名前でクラスをチェックできます。

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

そして、 addClassとremoveClassを使用してそれらを追加または削除します。

于 2012-06-14T02:59:29.547 に答える
25

以下の配列ですべてのクラスを取得します

event.target.classList
于 2018-10-10T11:59:08.720 に答える
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関数はありません。

于 2012-06-14T03:07:24.177 に答える
1

jQuery 1.7を使用している場合：

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

また：

alert($(event.target).prop("class"));
于 2012-06-14T03:00:49.763 に答える
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'));
    });
});

いい答えをありがとう！

于 2016-02-23T19:43:03.230 に答える
0

Visheshの回答が改善され、代わりにブール値が返されます。

event.target.classList.contains(className)
于 2021-10-26T10:08:23.013 に答える