1
votes

'N'a pas de sélecteur de classe' dans jQuery. Sélectionnez un élément par nom de classe particulier qui contient plusieurs classes

Je souhaite sélectionner un élément par un nom de classe particulier (l'élément contient plusieurs classes). J'ai référencé cette réponse mais je n'ai pas fonctionné pour moi.

const changeColor = () => {
   if ($("i:not(.clicked)")){
     console.log("no clicked class")
   }
}

cliqué est une classe personnalisée avec couleur: rouge à l'intérieur.

code Javascript :

$("i").click(()=> {
    changeColor();
})

const changeColor = () => {
    if (!$(this).hasClass('clicked')) {
        console.log('not clicked class')
    }
}

<i class="fas fa-star fa-lg clicked"></i>
<i class="fas fa-star fa-lg"></i>
<i class="fas fa-star fa-lg"></i>

Les deux implémentations ne fonctionnent pas. Si vous savez pourquoi, faites-le moi savoir.

javascript jquery

0 commentaires

3 Réponses :

0
votes

Pouvez-vous essayer d'utiliser element.is ('. clicked') ? Vous pouvez essayer plusieurs combinaisons avec is

0 commentaires

4
votes

Vous ne capturez pas correctement la référence this , la notation fléchée ne peut pas utiliser la référence implicite this , évitez de l'utiliser avec jQuery :

Une expression de fonction de flèche a une syntaxe plus courte qu'une expression de fonction et n'a pas ses propres this , arguments , super ou nouveau.target . Ces expressions de fonction sont les mieux adaptées aux fonctions non-méthode et ne peuvent pas être utilisées comme constructeurs.

J'ai retravaillé votre code pour qu'il fonctionne comme prévu:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="fas fa-star fa-lg clicked">Button 1</i>
<i class="fas fa-star fa-lg">Button 2</i>
<i class="fas fa-star fa-lg">Button 3</i>

.as-console {background-color:black !important; color:lime;}

.clicked {
   color: red;
}

$("i").click(function()
{
    changeColor($(this));
});

const changeColor = (obj) =>
{
    if (!obj.hasClass('clicked'))
        console.log('not clicked class');
}

3 commentaires

Merci beaucoup. Donc, nous ne pouvons pas capturer correctement $ (this) dans les fonctions fléchées imbriquées? J'ai lu quelques articles sur les «fonctions non méthodologiques» mais je ne sais pas si j'ai bien compris. En bref, je ne devrais pas utiliser la fonction flèche si je fais référence à un élément en dehors de la portée lexicale de sa fonction flèche. Correct?

Il n'y a pas besoin d'imbrication, vous ne pouvez pas capturer $ (this) comme contexte où l'événement de clic se produit dans une fonction de flèche. Vous pouvez en savoir plus ici: Fonctions fléchées et Portée lexicale . Pensez également à accepter la réponse comme correcte si cela vous aide.

Merci, vous m'avez vraiment aidé. J'étudierai quand utiliser les fonctions fléchées et quand NE PAS utiliser les fonctions fléchées.

1
votes

Au lieu de ce mentionné, vous pouvez utiliser event.currentTarget à la place:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="fas fa-star fa-lg clicked">Button 1</i>

<i class="fas fa-star fa-lg">Button 2</i>

<i class="fas fa-star fa-lg">Button 3</i>

.clicked {
   color: red;
}

$("i").click(function(event)
{
    changeColor($(event.currentTarget));
});

const changeColor = ($element) =>
{
    if (!$element.hasClass('clicked'))
        console.log('not clicked class');
}

Utiliser ce dans le code peut être déroutant car vous devez avoir une bonne connaissance de son fonctionnement. Beaucoup de gens ont tendance à ne pas l'utiliser à cause de cela.

Gardez à l'esprit que j'ai renommé obj en $ element . Je recommande fortement d'utiliser le préfixe $ pour montrer que cette variable contient un jQuery.

0 commentaires