Comment faire jquery.show() afficher autre chose que 'block'

Question

Je travaille sur une application web d'une seule page, j'ai donc beaucoup de div HTML avec les règles CSS associées qui définissent "display: none; " En fonction de ce que fait l'utilisateur, j'utilise quelque chose comme $ ('# some-id'). Css ('display', 'block') pour régler l'affichage sur autre chose que "none". Cela rend la div visible, et tout va bien.

Mais c'est moche, parce que mon code JavaScript doit savoir quelle valeur utiliser pour "afficher" pour chaque div. Habituellement, c'est "bloc", "inline", ou "grille". Cette information devrait être dans le CSS, pas dans le JavaScript.

J'ai essayé d'utiliser jquery.show() et jquery.hide(), mais l'affichage est toujours défini sur "block" s'il commence par "none". J'espérais qu'il y avait un moyen en CSS pour indiquer la valeur d'une div pour quand ce n'est pas "aucun". Mais je n'ai rien trouvé de tel.

Existe-t-il une solution plus élégante?

Answer 1

Une solution plus élégante serait travailler avec des classes.

Comme vous l'avez dit, les informations display se trouvent dans votre fichier CSS. La solution la plus simple et la plus lisible consiste à ajouter une classe .hidden aux éléments qui doivent être masqués.

Dans votre fichier CSS:

.hidden {display: none;} 

classe Toggle dans jQuery:

// Equivalent of hide(): 
$(el).addClass("hidden") 

// Equivalent of show(): 
$(el).removeClass("hidden") 

Vous ne devez pas ajouter quoi que ce soit plus. Pas de règles CSS supplémentaires ou quoi que ce soit. Si vous travaillez avec des règles spécifiques, vous pouvez ajouter !important. Je pense que c'est l'un de ces cas où son utilisation est justifiée, i.e. .:

.hidden {display: none !important;} 

Maintenant, tous les éléments se seront cachés s'ils ont la classe hidden, même si leur sélection est plus spécifique.

Answer 2

Vous pouvez simplement utiliser directement

$(whatever).css('display', 'what you want'); 

Retrait de l'attribut de style en ligne serait quelque chose comme l'autre question: Use jQuery to remove an inline style

Answer 3

Vous pouvez peut-être essayer l'initialisation css pour récupérer l'affichage d'origine de l'élément (inline ou Block).

$('#some-id').css('display', 'initial'); 

Answer 4

$('#element').show(); 
%('#element').css('display','inline') 

ou

$('#element').addClass('show'); 

dans stylesheet:

.show{ 
    display: inline; 
} 

Ou devrait fonctionner correctement. Je ne connais pas d'autre moyen.