Getting the class of the element that fired an event using JQuery
Question
is there anyway to get the class when click event is fired. My code as below, it only work for id but not 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 code here
8 answers
solution1
145 ACCPTED 2012-06-14 02:59:19
Try:
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id+" and "+$(event.target).attr('class'));
});
});
solution2
122 2012-06-14 02:59:29
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 .
solution3
25 2018-10-10 11:59:08
您将获得以下数组中的所有类
event.target.classList
solution4
3 2012-06-14 03:07:24
$(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.
solution5
1 2012-06-14 03:00:49
If you are using jQuery 1.7:
alert($(this).prop("class"));
or:
alert($(event.target).prop("class"));
solution6
0 2016-02-23 19:43:03
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!
solution7
0 2021-10-26 10:08:23
Vishesh 答案的改进，它返回一个布尔值：
event.target.classList.contains(className)
solution8
-1 2022-12-20 10:19:48
$(e.target).hasClass('active')
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.