Masquer un élément HTML sous condition

Fermé
BellamyBlack Messages postés 1 Date d'inscription mercredi 18 mars 2020 Statut Membre Dernière intervention 18 mars 2020 - 18 mars 2020 à 12:55
 Amados - 20 mars 2020 à 04:51
Bonjour à tous,

Je solicite votre aide sur la création d'un script permettant de masquer un élément si celui-ci ne possède pas de contenu.

J'ai créé une boutique en ligne sur WordPress car je n'ai pas beaucoup de connaissance en programmation web, à part quelques notions en HTML/CSS.

Sur ma page Boutique, j'ai inséré un plugin pour filtrer les produits par mots-clés, catégorie, prix, taxonomies... Dans les réglages de ce plugin, une option me permet de masquer les termes (checkbox) qui ne possèdent pas de résultat. Cependant, selon certaines catégories, se sont des taxonomies entières qui seront vide mais le bloc de la taxonomie est toujours visible, il a simplement masquer les termes/checkbox de son contenu.

Par exemple, j'ai 2 catégories : "Maison & Jardin" et "Chaussures". J'ai un autre filtre "Pointure" qui est toujours affiché. Du coup, lorsque je sélectionne la catégorie "Maison & Jardin", il n'y a plus lieu d'afficher le filtre "Pointure" car tout son contenu est vidé de ses checkbox car aucune pointure ne correspond à cette catégorie.

Comme vous pouvez le voir sur les screenshots ci-joints ou encore le site directement https://www.tillap.com/boutique/ j'aimerai masquer tout les éléments de type "taxonomy" par un simple [data-sf-field-type="taxonomy"]{display:none;} seulement SI il n'y a aucune ligne de type <li> dans la partie <ul> dans son contenu.

Je pense qu'il doit y avoir moyen d'obtenir ce résultat en JavaScript mais je n'ai aucune connaissance dans ce langage c'est pourquoi j'aurai aimé être orienté vers la solution sur ce forum.

Merci d'avance pour votre aide!

Pièces jointes:
http://image.noelshack.com/fichiers/2020/12/3/1584531981-01.jpg
http://image.noelshack.com/fichiers/2020/12/3/1584532001-02.jpg

1 réponse

Bonjour,
"d'obtenir ce résultat en JavaScript mais je n'ai aucune connaissance dans ce langage c'est pourquoi j'aurai aimé être orienté vers la solution sur ce forum. "

Plutôt que d'être orienté vous pouvez commencer par apprendre JavaScript.
Une orientation sert à rien si vous ne savez comment vous déplacer pour vous rendre en un lieu.
Si vous connaissez javaScript(ou la programmation en général) vous savez que Javascript peut modifier le HTML et le CSS, donc le contenu qui s'affiche sur une page.

Il permet aussi de faire de la programmation événementielle: soit de détecter un événement et d'y apporter une réponse/réaction sous la forme d'une fonction.


Voici donc pour vous orienter en supposant que vous êtes au point avec HTML et CSS:
https://www.google.fr/search?q=apprendre+JavaScript&oq=apprendre+JavaScript

Sinon vous devez commencer par apprendre HTML et CSS.


Il n'y a rien de sorcier ou mystique là dedans. Ce sont des langages. HTML et CSS sont descriptifs et JavaScript permet de faire des scripts de programmation.

Comme tout langage il faut connaître sa syntaxe et sa structure, rien que cela et aucune orientation ne peut apprendre à votre place.

L'avantage par rapport aux langages des humains pour communiquer entre eux c'est que c'est beaucoup simple et simpliste, il y a un vocabulaire plus limité de même pour la syntaxe et sa structure.

Un autre avantage est de pouvoir apprendre par la pratique soi même sans avoir besoin d'être dans un autre pays ou confronté à un interlocuteur qui vous regardera bizarrement parce que vous n'avez pas la bonne prononciation ou tournure de phrase: vous aurez une erreur si ce n'est pas correct. Cela fera ce que vous dites si c'est correct, donc le test et vérification (debug) est implicite dans l'utilisation de ces langages.

Vous pouvez voir ceci aussi pour un exemple concret mais comme j'ai expliqué cela ne vous avancera pas à grand chose(le site contient des manuels techniques édictés par le consortium d'Internet, mais clairement il sera plus efficace de vous en servir comme références et d'apprendre sur un autre site).

Pour une condition:
https://www.w3schools.com/js/js_if_else.asp

Pour modifier un affichage, bien sûr cela dépends du contexte: HTML et CSS et autres aussi bien que ce qu'on veut faire donc ce ne sera pas forcément cette méthodes(functions interne à un objet) qui devra être utilisée dans un cas particulier ou un autre:
https://www.w3schools.com/jsref/prop_html_innerhtml.asp

j'ai indiqué ces 2 derniers liens uniquement à titre d'exemple et que pour vous faire comprendre que si vous n'avez pas la globalité du fonctionnement du langage vous ne comprendrez rien et à fortiori ne pourrez pas faire grand chose.

Bon apprentissage.
Gardez de vue que si c'est un métier et qu'il faut de nombreuses années de cours et pratique pour devenir professionnel cela reste totalement accessible à tous et tout le monde. Bien sûr il faut du travail ;)
0