0
votes

TGGLecLass: supprimez la classe actuelle et ajoutez une nouvelle classe

J'ai une boîte verte et remplacez-la par une boîte rouge à l'aide de Tobgleclass. Visuellement, la couleur change, mais je dois supprimer une classe actuelle complètement dans un div et ajouter une nouvelle classe à l'aide de Toggleclass.

Problème: La classe actuelle est toujours là pendant qu'elle ajoute une nouvelle classe dans l'inspecteur. P >

aidez s'il vous plaît p>

Jsfiddles P>

HTML P>

$('#click').click(function() {
    $('.green').toggleClass('red');
  //$('.green').toggleClass('red green');
})

jquery css

0 commentaires

4 Réponses :

1
votes

Ajoutez une classe ou un identifiant différent et utilisez-le pour basculer entre les classes rouges et vertes li>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle green">
qwewqewq
</div>

<button id="click" value="Click">
 Click Me
 </button>

0 commentaires

1
votes

Si vous êtes prêt à utiliser Vanilla JS, voici une JS Vanilla pour obtenir la bascule que vous essayez:

<div class="colors green"></div>
<button id="click">click</button>

0 commentaires

1
votes

Je remarque que vous utilisez toggleclass code> méthode. Cette méthode ajoute ou supprimez S une ou plusieurs classes de chaque élément de l'ensemble des éléments appariés, en fonction de la présence de la classe ou de la valeur de l'argument de l'état.

Cependant, la façon dont vous utilisez c'est faux et ici je expliquera pourquoi. Dans votre code, vous avez utilisé $ ('. Vert'). Tobgleclass ('Red Green'); Code> Cela ne fonctionnera qu'une fois que lorsque le DIV code> La classe changera de .green code> à .red code>, il n'y aura pas div.green code> éléments et votre script ne sera plus appliqué. p>

La solution est simple, définissez simplement un identifiant à l'élément ou appliquez une classe auxiliaire. P>

`Ajout d'un identifiant h2>`

Définir simplement un identifiant pour le div code>, par exemple élément-id code>. Cette solution bascule les classes .green code> et .red code> uniquement pour cet élément, comme celui-ci: p>

p>



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

<div class="aux-class green">DIV 1</div>
<div class="aux-class green">DIV 2</div>
<button id="click">Click Me</button>

1 commentaires

Bonjour Teocci, merci beaucoup pour votre aide et une explication très claire. Cette classe auxiliaire obtient ça marche!

1
votes

Essayez ceci, il remplacera complètement la classe actuelle complètement.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="target" class="blue">Hello World</h1>

0 commentaires