87

当点击事件被触发时,无论如何都可以获得类。我的代码如下,它只适用于 id 而不是类。

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

并使用addClassremoveClass添加或删除它们。

于 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 回答