Réglage des classes CSS html avec jQuery

Question

J'ai donc un élément

<div class="accordion">hello</div> 

et quand un événement se produit (bouton cliqué) plusieurs classes sont ajoutés et supprimés à l'élément trouvé ci-dessus.

La première phase ajoute la classe beginning-transition

<div class="accordion beginning-transition">hello</div> 

La deuxième phase ajoute la classe middle-transition et supprime la classe beginning-transition.

<div class="accordion middle-transition">hello</div> 

La dernière étape supprime la classe middle-transition

<div class="accordion">hello</div> 

Au cours de ce bouton événement click je lance une formule qui détermine la hauteur de la div.

var element = $('.accordion'); 
element.css('height', 10); 
$(element + '.beginning-transition').css('height', 100); 
$(element + '.middle-transition').css('height', 200); 

Le problème est que lorsque les deux classes beginning-transition et middle-transition sont ajoutés à la classe, la hauteur CSS ne change pas de 10px.

La ligne ci-dessous:

element.css('height', 10); 

Semble pour remplacer ces deux règles CSS:

$(element + '.beginning-transition').css('height', 100); 
$(element + '.middle-transition').css('height', 200); 

Comment puis-je résoudre ce problème?

Answer 1

var element = $('.accordion'); 
element.css('height', 10); 
$(element + '.beginning-transition').css('height', 100); 
$(element + '.middle-transition').css('height', 200); 

Vous attribuez donc une hauteur ... puis vous attribuez un remplacement? Fais-le juste une fois.

var element = $('.accordion')[0]; 
if (element.classList.contains('beginning-transition')) { 
    element.style.height = '100px'; 
} else if (element.classList.contains('middle-transition')) { 
    element.style.height = '200px'; 
} else { 
    element.style.height = '10px'; 
} 

C'est JS vanilla, mais c'est la même chose (avec des noms différents) dans jQuery. Le problème réel est que vous étiez en train d'ajouter une liste d'éléments jQuery ($('.accordion')) à une chaîne (la classe). Cela n'a pas de sens. Pour résoudre le problème de changer votre code aussi peu que possible, faire:

var element = $('.accordion'); 
element.css('height', 10); 
$('.accordion.beginning-transition').css('height', 100); 
$('.accordion.middle-transition').css('height', 200); 

En cas de doute, le débogage avec votre console.

Answer 2

Vous essayez de concaténer une chaîne de sélecteur à element qui est un objet jQuery. Cela ne fonctionnera pas, puisque les objets jQuery ne sont pas convertis en leurs chaînes de sélecteur lorsqu'ils sont convertis en chaînes, donc vous obtiendrez simplement une chaîne de sélecteur insensée.

Si vous devez enregistrer la chaîne de sélection d'origine pour utiliser plus tard besoin de l'enregistrer séparément:

var selector = '.accordion'; 

// Or var element = $(selector); element.css(...); if you need the element var too 
$(selector).css('height', 10); 
$(selector + '.beginning-transition').css('height', 100); 
$(selector + '.middle-transition').css('height', 200); 

Answer 3

JQUERY $ («accordéon »).cliquez sur (function() {

setTimeout(function() {$(".accordion").addClass("BT")}, 1000); 
setTimeout(function() {$(".accordion").addClass("MT")}, 2000); 
setTimeout(function() {$(".accordion").removeClass("BT")}, 3000); 
setTimeout(function() {$(".accordion").removeClass("MT")}, 3000); 



}); 

CSS

.accordion { 
width: 399px; 
height:100px; 
background: black; 
} 

.BT { 

height:200px; 
} 

.MT { 
height: 300px; 
}