Abrufen der Klasse des Elements, das ein Ereignis ausgelöst hat, mithilfe von JQuery

80

gibt es sowieso, um die Klasse zu erhalten, wenn das Klickereignis ausgelöst wird. Mein Code wie unten, es funktioniert nur für ID, aber nicht Klasse.

$(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>
Erweitern Sie das Snippet

jsfiddle Code hier

javascript javascript-events jquery Redbox
quelle
11
Klasse ist eine reservierte Arbeit in ECMAScript, daher wird das Klassenattribut der classNameDOM-Eigenschaft zugeordnet. Verwenden Sie event.target.className.
RobG

Antworten:

136

Versuchen:

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

Dies enthält die vollständige Klasse (dies können mehrere durch Leerzeichen getrennte Klassen sein, wenn das Element mehr als eine Klasse hat). In Ihrem Code enthält es entweder "konbo" oder "kinta":

event.target.className

Mit jQuery können Sie nach Klassen nach Namen suchen:

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

und um sie mit addClass und removeClass hinzuzufügen oder zu entfernen .

Paul
quelle
20

Sie erhalten die gesamte Klasse im folgenden Array

event.target.classList
Vishesh Mishra
quelle
Ich finde diese Antwort hilfreicher als die von @ broesch. Es hat weniger Abhängigkeiten und scheint an dieser Stelle natürlicher zu sein.
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>
Erweitern Sie das Snippet

Das funktioniert bei mir. In jQuery gibt es keine event.target.class-Funktion.

drjay
quelle
aus irgendeinem grund muss ich das event nutzen, trotzdem danke für die antwort. broesch hat geantwortet was ich brauche.
Redbox
1

Wenn Sie jQuery 1.7 verwenden:

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

oder:

alert($(event.target).prop("class"));
Evan Mulawski
quelle
0

Vorsichtig, da es targetmöglicherweise nicht mit allen Browsern funktioniert, funktioniert es gut mit Chrome, aber ich denke, Firefox (oder IE / Edge, kann mich nicht erinnern) ist ein bisschen anders und verwendet srcElement. Normalerweise mache ich so etwas

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

so führt zu

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

Danke für die schönen Antworten!

Rom
quelle
targetfunktioniert mit Firefox, IE / Edge würde brauchensrcElement
Hassan Baig