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

82

vẫn có để nhận lớp khi sự kiện nhấp chuột được kích hoạt. Mã của tôi như dưới đây, nó chỉ hoạt động cho id chứ không phải lớp.

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

Mở rộng đoạn mã

mã jsfiddle đây

javascript javascript-events jquery

— Hộp đỏ
nguồn

11

Lớp là một công việc dành riêng trong ECMAScript, vì vậy thuộc tính lớp được ánh xạ tới thuộc tính classNameDOM. Sử dụng event.target.className.

— RobG

137

Thử:

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

— broesch
nguồn

110

Điều này sẽ chứa đầy đủ lớp (có thể là nhiều lớp được phân tách bằng dấu cách, nếu phần tử có nhiều hơn một lớp). Trong mã của bạn, nó sẽ chứa "konbo" hoặc "kinta":

event.target.className

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

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

và thêm hoặc bớt chúng bằng addClass và removeClass .

— Paul
nguồn

21

Bạn sẽ nhận được tất cả các lớp trong mảng bên dưới

event.target.classList

— Vishesh Mishra
nguồn

Tôi thấy câu trả lời này hữu ích hơn so với câu trả lời của @ broesch. Nó có ít phụ thuộc hơn và có vẻ tự nhiên hơn vào thời điểm này.

— Coxer

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>

Mở rộng đoạn mã

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

— drjay
nguồn

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

— Redbox

1

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

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

hoặc là:

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

— Evan Mulawski
nguồn

0

Cẩn thận vì targetcó 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) hơi khác một chút và sử dụng srcElement. Tôi thường làm một cái gì đó như

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

do đó 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!

— Rom
nguồn

targethoạt động với Firefox, IE / Edge sẽ cầnsrcElement

— Hassan Baig