web-dev-qa-db-fra.com

Obtention de la classe de l'élément qui a déclenché un événement à l'aide de JQuery

existe-t-il quand même pour obtenir la classe lorsque l'événement click est déclenché? Mon code comme ci-dessous, il ne fonctionne que pour id mais pas pour la classe.

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

code jsfiddle ici

javascriptjavascript-eventsjquery
68
Redbox

Essayer:

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

Cela contiendra la classe complète (qui peut être plusieurs classes séparées par des espaces, si l'élément a plus d'une classe). Dans votre code, il contiendra "konbo" ou "kinta":

event.target.className

Vous pouvez utiliser jQuery pour vérifier les classes par leur nom:

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

et pour les ajouter ou les supprimer avec addClass et removeClass .

94
Paulpro

Vous obtiendrez toute la classe dans le tableau ci-dessous

event.target.classList
3
Vishesh Mishra
$(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>

Cela fonctionne pour moi. Il n'y a pas de fonction event.target.class dans jQuery.

2
drjay

Si vous utilisez jQuery 1.7:

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

ou:

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

Attention, car target pourrait ne pas fonctionner avec tous les navigateurs, il fonctionne bien avec Chrome, mais je pense que Firefox (ou IE/Edge, je ne m'en souviens pas) est un peu différent et utilise srcElement. Je fais habituellement quelque chose comme

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

conduisant ainsi à

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

Merci pour les belles réponses!

0
Rom