Lấy lớp của phần tử đã kích hoạt sự kiện bằng cách sử dụng JQuery

là có cách nào để có được lớp khi sự kiện nhấp được kích hoạt. Mã của tôi như dưới đây, nó chỉ làm việc cho id nhưng không phải lớp.Lấy lớp của phần tử đã kích hoạt sự kiện bằng cách sử dụng JQuery

html:

<html> 
<body>  
<a href="#" id="kana1" class="konbo">click me 1</a> 
<a href="#" id="kana2" class="kinta">click me 2</a> 
</body> 
</html>

JQuery:

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

đang jsfiddle here

Nguồn

2012-06-14 Redbox

+11

Lớp là công việc được bảo lưu trong ECMAScript, do đó thuộc tính lớp được ánh xạ tới thuộc tính DOM 'className'. Sử dụng 'event.target.className'. – RobG

103

Hãy thử:

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

Nguồn

2012-06-14 02:59:19 broesch

này sẽ chứa đầy đủ các lớp (có thể mult các lớp cách ly không gian iple, nếu phần tử có nhiều hơn một lớp). Trong mã của bạn nó sẽ chứa một trong hai "konbo" hoặc "kinta":

event.target.className

Bạn có thể sử dụng jQuery để kiểm tra cho các lớp học theo tên:

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

và để thêm hoặc loại bỏ chúng với addClass và removeClass .

Nguồn

2012-06-14 02:59:29 Paulpro

+1 cho '.className'. –

Nếu bạn đang sử dụng jQuery 1.7:

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

hay:

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

Nguồn

2012-06-14 03:00:49

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

<script> 
    $(document).ready(function() { 
    $("a").click(function(event) { 
     var myClass = $(this).attr("class"); 
     var myId = $(this).attr('id'); 
     alert(myClass + " " + myId); 
    }); 
}) 
</script>> 
</body> 
</html>

này làm việc cho tôi. Không có hàm event.target.class trong jQuery.

Nguồn

2012-06-14 03:07:24 drjay

vì một lý do nào đó tôi phải sử dụng sự kiện này, dù sao cũng nhờ câu trả lời. broesch đã trả lời những gì tôi cần. – Redbox

Cẩn thận vì target có thể không hoạt động với tất cả các trình duyệt, nó hoạt động tốt với Chrome, nhưng tôi cho rằng Firefox (hoặc IE/Edge không thể nhớ) có chút khác biệt và sử dụng srcElement. Tôi thường làm điều gì đó như

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

dẫn đến

$(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 cho câu trả lời tốt đẹp!

Nguồn

2016-02-23 19:43:03 Rom

Lấy lớp của phần tử đã kích hoạt sự kiện bằng cách sử dụng JQuery

Trả lời

Các vấn đề liên quan