Pobranie klasy elementu, który wywołał zdarzenie przy użyciu JQuery

82

czy mimo to można uzyskać klasę po uruchomieniu zdarzenia kliknięcia. Mój kod jak poniżej, działa tylko dla id, ale nie klasy.

$(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>
Rozwiń fragment

jsfiddle tutaj

javascript javascript-events jquery Redbox
źródło
11
Klasa jest pracą zastrzeżoną w ECMAScript, więc atrybut class jest mapowany na classNamewłaściwość DOM. Użyj event.target.className.
RobG,

Odpowiedzi:

138

Próbować:

$(document).ready(function() {
    $("a").click(function(event) {
       alert(event.target.id+" and "+$(event.target).attr('class'));
    });
});
broesch
źródło
110

Będzie zawierać pełną klasę (która może być wieloma klasami oddzielonymi spacjami, jeśli element ma więcej niż jedną klasę). W Twoim kodzie będzie zawierać „konbo” lub „kinta”:

event.target.className

Możesz użyć jQuery, aby sprawdzić klasy według nazwy:

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

oraz dodawać lub usuwać je za pomocą addClass i removeClass .

Paweł
źródło
21

Otrzymasz całą klasę w poniższej tablicy

event.target.classList
Vishesh Mishra
źródło
Uważam, że ta odpowiedź jest bardziej pomocna w porównaniu z odpowiedzią @ broesch. Ma mniej zależności i wydaje się w tym momencie bardziej naturalny.
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>
Rozwiń fragment

To działa dla mnie. W jQuery nie ma funkcji event.target.class.

drjay
źródło
z jakiegoś powodu muszę skorzystać z wydarzenia, tak czy owak dzięki za odpowiedź. Broesch odpowiedział na to, czego potrzebuję.
Redbox,
1

Jeśli używasz jQuery 1.7:

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

lub:

alert($(event.target).prop("class"));
Evan Mulawski
źródło
0

Ostrożnie, ponieważ targetmoże nie działać ze wszystkimi przeglądarkami, działa dobrze z Chrome, ale uważam, że Firefox (lub IE / Edge, nie pamiętam) jest nieco inny i używa srcElement. Zwykle robię coś takiego

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

prowadząc do

$(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'));
    });
});

Dzięki za miłe odpowiedzi!

Rom
źródło
targetdziała z przeglądarką Firefox, IE / Edge będzie potrzebowaćsrcElement
Hassan Baig