JQuery를 사용하여 이벤트를 발생시킨 요소의 클래스 가져 오기

82

어쨌든 클릭 이벤트가 시작될 때 클래스를 얻을 수 있습니까? 내 코드는 아래와 같이 id에서만 작동하지만 클래스에서는 작동하지 않습니다.

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

javascript javascript-events jquery

— Redbox
소스

11

클래스는 ECMAScript에서 예약 된 작업이므로 클래스 속성은 classNameDOM 속성에 매핑됩니다 . 사용 event.target.className.

— RobG

138

시험:

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

— Broesch
소스

110

여기에는 전체 클래스가 포함됩니다 (요소에 둘 이상의 클래스가있는 경우 공백으로 구분 된 여러 클래스 일 수 있음). 코드에는 "konbo"또는 "kinta"가 포함됩니다.

event.target.className

jQuery를 사용하여 이름으로 클래스를 확인할 수 있습니다.

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

addClass 및 removeClass를 사용하여 추가하거나 제거합니다 .

— 폴
소스

21

아래 배열의 모든 클래스를 얻을 수 있습니다.

event.target.classList

— Vishesh Mishra
소스

이 답변은 @broesch에 비해 더 도움이됩니다. 종속성이 적고이 시점에서 더 자연스러워 보입니다.

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

스 니펫 확장

이것은 나를 위해 작동합니다. jQuery에는 event.target.class 함수가 없습니다.

— Drjay
소스

왠지 이벤트를 이용해야합니다. 어쨌든 답변 감사합니다. broesch는 내가 필요한 것에 답했습니다.

— Redbox 2012-06-14

1

jQuery 1.7을 사용하는 경우 :

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

또는:

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

— Evan Mulawski
소스

0

target모든 브라우저에서 작동하지 않을 수 있으므로 주의 해서 Chrome에서 잘 작동하지만 Firefox (또는 IE / Edge, 기억할 수 없음)는 약간 다르며 srcElement를 사용합니다. 나는 보통 다음과 같은 것을한다

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

따라서

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

— ROM
소스

target파이어 폭스, IE / 에지와 작품은 필요srcElement

— 하산 베이 그에게