Getting the class of the element that fired an eve

2020-05-12 06:28发布

站内问答 / JavaScript
908 6 6

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

6条回答
神经病院院长
2楼-- · 2020-05-12 06:41

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.

查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
3楼-- · 2020-05-12 06:50 

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

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
4楼-- · 2020-05-12 06:53

Try:

$(document).ready(function() {
    $("a").click(function(event) {
       alert(event.target.id+" and "+$(event.target).attr('class'));
    });
});
查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
5楼-- · 2020-05-12 06:59

You will get all the class in below array

event.target.classList
查看更多
0人赞 添加讨论(0) 举报
何必那么认真
6楼-- · 2020-05-12 07:07

If you are using jQuery 1.7:

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

or:

alert($(event.target).prop("class"));
查看更多
0人赞 添加讨论(0) 举报
▲ chillily
7楼-- · 2020-05-12 07:07

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!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)