-3
votes

Comment puis-je utiliser ceci si j'utilise deux classe ensemble en utilisant jQuery?

Je dois sélectionner deux classes, mais il y a un problème si je veux utiliser ceci juste pour une classe unique, comment puis-je utiliser cela? Comme indiqué ci-dessous: -

p>

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

<div class="city-selector-close">X</div>
<div class="city-selector">
  <ul>
    <li class="active">Gurgaon</li>
    <li>Delhi</li>
    <li>Noida</li>
    <li>Faridabad</li>
  </ul>
</div>
<div class="selected-city"><span>Gurgaon</span></div>


4 commentaires

Je ne comprends pas le problème - pourquoi voudriez-vous jamais mettre à jour le texte lorsque vous cliquez sur l'icône Fermer? Utilisez simplement deux gestionnaires d'événements distincts.


En fait, je peux le faire avec deux manuels d'événements distincts, mais je veux juste savoir comment résoudre ce type de problème lorsque je dois travailler avec un seul gestionnaire?


Il est difficile de comprendre le problème, car l'exemple n'a aucun sens.


@Rohitverma Dans ce cas, vous pouvez simplement utiliser si la condition et séparer les événements. Stackoverflow.com/a/56666569/4354201


4 Réponses :


2
votes

Il sonne comme em> ce que vous essayez de décrire sont deux gestionnaires de clic distincts. Un pour cliquer sur les villes, une pour cliquer sur le x:

p>

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

<div class="city-selector-close">X</div>
<div class="city-selector">
  <ul>
    <li class="active">Gurgaon</li>
    <li>Delhi</li>
    <li>Noida</li>
    <li>Faridabad</li>
  </ul>
</div>
<div class="selected-city"><span>Gurgaon</span></div>


0 commentaires

2
votes

Si vous souhaitez gérer cela, vous pouvez créer 2 gestionnaires d'événements différents

p>

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

<div class="city-selector-close">X</div>
<div class="city-selector">
  <ul>
    <li class="active">Gurgaon</li>
    <li>Delhi</li>
    <li>Noida</li>
    <li>Faridabad</li>
  </ul>
</div>
<div class="selected-city"><span>Gurgaon</span></div>


0 commentaires

1
votes

Je favoriserais également deux manuels de clic distincts aussi, mais si vous voulez vraiment utiliser un seul, vous pouvez vérifier la classe de l'élément cliqué à l'aide de la fonction hasClass : xxx

mais faisant écho à ce que les autres interrogateurs ont dit, il est beaucoup plus logique de diviser cette fonctionnalité en deux manuels de clic distincts.


4 commentaires

Merci @Phil tu as répondu comme exactement je veux! Je n'utilise pas de gestionnaires séparés pour cela parce que si j'utilise des gestionnaires séparés, je dois utiliser trop de code deux fois c'est pourquoi je ne peux pas le faire


@RORYMCCROSAN Je suis d'accord avec vous, mais il voulait savoir comment cela pourrait être fait dans une seule fonction et c'est ce que j'ai offert. En effet, il devrait la diviser en deux gestionnaires, c'est juste une alternative (bien que pire une pire).


Vrai. Ce n'était pas un commentaire constructif - je m'excuse.


@Rohitverma: "Alors je dois utiliser trop de code deux fois" - le Mantra "Ne te répète pas" fait référence à la logique et non à la frappe. Si votre objectif principal de la programmation est de produire autant de frappes que possible que possible, vous allez écrire très Difficile à soutenir le code. Cet exemple actuel est relativement mineur, mais dans une application complète de cette entreprise vous coûtera beaucoup, beaucoup heures de travail frustrant tout simplement pour économiser quelques octets d'espace de stockage.



0
votes

Vous pouvez récupérer le nom de classe de l'élément qui a provoqué l'événement de clic à l'aide de xxx pré>

donc à l'intérieur de la fonction de la fonction de rappel s'il est sélecteur de ville-ferme-ferme fort> et dans cas, il n'est pas affiche le texte. p>

p>

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

<div class="city-selector-close">X</div>
<div class="city-selector">
  <ul>
    <li class="active">Gurgaon</li>
    <li>Delhi</li>
    <li>Noida</li>
    <li>Faridabad</li>
  </ul>
</div>
<div class="selected-city"><span>Gurgaon</span></div>


0 commentaires