Est-il préférable d'échanger des classes ou d'échanger du contenu dans jQuery

Question

Je me demandais lequel de ces deux scénarios fonctionne le mieux pour l'échange entre 2 déclaré. Disons pour désactiver temporairement un bouton.

Je pense que le premier et le plus simple est d'avoir les deux morceaux de html déjà en place. Et quand on clique dessus la classe de n'est permuté, comme ceci:

css: 
.none{display:none;} 

html init: 
<div class"somecss none">but1</div> 
<div class"somecss">but1</div> 

html changed: 
<div class"somecss none">but1</div> 
<div class"somecss">but1</div> 

Le deuxième scénario que je peux penser est swapping tout le morceau de HTML en utilisant javascript. Je pense que le code est clair sur celui-là. Vous venez d'avoir une instruction if et insérez simplement le code html requis pour l'état.

pour, le contre

Dans le premier scénario, vous avez plus d'éléments DOM je suppose, surtout lorsque le html des deux conteneurs est grande. Il n'y a cependant pas grand-chose à faire dans javascrip. Dans le second scénario, le DOM est minimal, mais il faut un peu plus de javascript.

Lequel de ces 2 scénarios est le meilleur et pourquoi?

Et peut-être que vous connaissez une autre solution dont je n'étais pas au courant, j'aimerais l'entendre.

Merci et bonne journée!

Answer 1

Je n'ajouterais du contenu que s'il était demandé, c'est-à-dire ajax. Pour toute autre chose, la modification des classes ou d'autres attributs (vous avez mentionné la désactivation d'un bouton - vous pouvez également avoir $ ('# btn1'). Attr ('enabled', false);) est probablement la meilleure solution. .

Cest aussi comment les effets comme les accordéons fonctionnent - ils cachent le contenu plutôt que de l'ajouter/le supprimer.

Answer 2

La modification des classes va certainement être beaucoup plus rapide que la modification du DOM. Comme toute autre chose, cependant, vous voudriez vraiment essayer d'abord si la performance est importante (et ce n'est probablement pas le cas).

Il est bon de baser les choses sur la classe car alors vous pouvez obtenir la manipulation réelle de votre Javascript, et garder ces choses dans le HTML et le CSS. Le Javascript gère la sémantique d'action de vos éléments de page, mais le HTML et le CSS gèrent la présentation.