使用JQuery获取触发事件的元素的类

80

触发click事件后，是否仍然可以获取该类。我的代码如下，它仅适用于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代码在这里

javascript javascript-events jquery

— 红盒
source

11

在ECMAScript中，类是保留的工作，因此将类属性映射到classNameDOM属性。使用event.target.className。

— RobG 2012年

136

尝试：

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

— 布罗什
source

108

这将包含完整的类（如果元素具有多个类，则可以是多个以空格分隔的类）。在您的代码中，它将包含“ konbo”或“ kinta”：

event.target.className

您可以使用jQuery通过名称检查类：

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

并使用addClass和removeClass添加或删除它们。

— 保罗
source

20

您将在下面的数组中获取所有类

event.target.classList

— Vishesh Mishra
source

与@broesch相比，我发现此答案更有帮助。它具有更少的依赖性，并且在这一点上看起来更加自然。

— 考克斯

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函数。

— 德杰
source

由于某种原因，我必须使用该事件，无论如何，感谢您的回答。布罗什回答了我的需求。

— Redbox 2012年

1

如果您使用的是jQuery 1.7：

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

要么：

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

— 埃文·穆拉斯基（Evan Mulawski）
source

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

谢谢你的好答案！

— 只读存储器
source

target使用Firefox，则需要IE / EdgesrcElement

— Hassan Baig