반응형
JQuery를 사용하여 이벤트를 발생시킨 요소의 클래스 가져오기
클릭 이벤트가 발생할 때 클래스를 가져올 방법이 있습니까?아래와 같은 제 코드는 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>jfiddle 코드 여기
시도:
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id+" and "+$(event.target).attr('class'));
});
});
여기에는 전체 클래스(요소에 둘 이상의 클래스가 있는 경우 여러 개의 공백으로 구분된 클래스일 수 있음)가 포함됩니다.코드에는 "konbo" 또는 "kinta"가 포함됩니다.
event.target.className
jQuery를 사용하여 이름별로 클래스를 확인할 수 있습니다.
$(event.target).hasClass('konbo');
addClass 및 removeClass를 사용하여 추가 또는 제거합니다.
당신은 아래 배열로 모든 수업을 받게 될 것입니다.
event.target.classList
Vishesh 응답의 변형으로, 대신 부울을 반환합니다.
event.target.classList.contains(className)
$(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 함수가 없습니다.
jQuery 1.7을 사용하는 경우:
alert($(this).prop("class"));
또는:
alert($(event.target).prop("class"));
다음과 같이 주의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'));
});
});
좋은 답변에 감사드립니다!
$(e.target).hasClass('active')
언급URL : https://stackoverflow.com/questions/11026056/getting-the-class-of-the-element-that-fired-an-event-using-jquery
반응형
'IT' 카테고리의 다른 글
| 인라인/인라인 블록 요소의 CSS 수직 정렬 (0) | 2023.09.05 |
|---|---|
| 날짜/시간 개체의 분 단위 반올림 방법 (0) | 2023.09.05 |
| 사용자 입력을 가져오는 중 (0) | 2023.08.31 |
| MySQL "::1" 호스트 이름은 무엇을 의미합니까? (0) | 2023.08.31 |
| 변경 시 어떻게 구현합니까?변경 시 어떻게 구현합니까?jQuery와 함께?jQuery와 함께? (0) | 2023.08.31 |