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

当点击事件被触发时，是否存在获取类的方法。我的代码如下所示，它只适用于 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 代码 给你

245416 次浏览
小开
最佳答案

Try:

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

This will contain the full class (which may be multiple space separated classes, if the element has more than one class). In your code it will contain either "konbo" or "kinta":

event.target.className

You can use jQuery to check for classes by name:

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

and to add or remove them with addClass and removeClass.

小开

If you are using jQuery 1.7:

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

or:

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

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

This works for me. There is no event.target.class function in jQuery.

小开

Careful as target might not work with all browsers, it works well with Chrome, but I reckon Firefox (or IE/Edge, can't remember) is a bit different and uses srcElement. I usually do something like

var t = ev.srcElement || ev.target;

thus leading to

$(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 for the nice answers!

小开

You will get all the class in below array

event.target.classList
小开

A variant on Vishesh answer, which instead returns a Boolean:

event.target.classList.contains(className)

提交答案