Jquery - Affichage variable

Bonjour,
Premièrement je tiens a m'excuser pour ma question.. Je débute en Jquery et j'ai pas mal chipoté ( donc mon codage doit être extrêmement quelconque.. ) sur une page ou des éléments SVG pourrait être modifié par du CSS.

Mon problème est pour l'affichage des manches longues ou des manches courtes. J'ai donc des
.toggle(); pour l'affichage ou non des manches. cela fonctionne très bien sur le premier modèle mais dès que je change de modèle ( modèle 2 à droite je ne l'ai pas encore fait pour les autres ) j'ai l'impression que les variables se mélange et mes "if" ne sont probablement pas juste.. ce qui fait un mélange de tout quand on clique sur différent modèle et les manches s'affichent ou les cliques sont inversés etc...

J'ai donc mis 1 a une variable "MC" et l'autre "ML" a 0 et j'imaginais qu'une fois récupéré les élément resterai ou changerai..

Comment puis-je afficher ma variable ( ML et MC ) sur mon HTML qui s’adapterait a chaque fois que l'on clique sur manche courte ou manche longue? Je les modifies grâce a "ml = ml + 1;" ou "ml = ml - 1;" Pour que je puisse voir d’où pourrait venir mon problème et si mes variables se modifient bien au clique?

Je vous joins ci dessous le site www.marksports.eu/test2

En vous remerciant d'avance pour votre lecture et votre aide,
je vous souhaite une excellente journée.

Bien à vous,
NeSo

Salut,
Pour répondre à ta question, tu peux utiliser directement ton navigateur pour visualiser les variables JS. Firefox ou Chrome possèdent une console dans laquelle tu peux taper le nom de la variable pour voir sa valeur.

Sinon, tu peux afficher le contenu de ta variable dans la console en insérant

console.log(ml)

dans ton code pour que la valeur s'affiche au moment voulu. Voire même quelque chose de plus lisible comme :

console.log(`ml = ${ml}`)

Par ailleurs, ton code est très compliqué avec de nombreuses répétitions. Cela alourdit sa lisibilité et augmente les possiblités d'erreurs. Le principe de la programmation est d'automatiser des tâches répétitives. Donc lorsque tu as des fonctions qui se ressemblent fortement, il faut les combiner en une seule plus générique.

Par exemple, si je prends la fonction appelée pour changer les manches, tu fais 2 fois le même traitement pour subli1 et subli2. La seule différence vient de l'id de l'élément à manipuler. Pour éviter cette répétition, tu pourrais extraire le contenu dans une fonction et l'appeler en passant le paramètre voulu. De plus, cela t'évite de recopier le code à chaque nouveau tshirt.

De la même façon, le contenu de $("#ml").click est le même que $("#mc").click. Seule la variable testée change. D'ailleurs, tu as utilisé 2 variables contenant soit 1, soit 0. C'est le fonctionnement du type booléen qui ne peut être que vrai ou faux, boolean en JS. En choisissant ce type plus adapté, tu simplifies ton fonctionnement et évite d'éventuelles erreurs de synchronisation entre les 2 variables ml et mc. De plus, comme ces variables fonctionnent en opposition, le dernier test if ( mc == 1) return false est inutile. Sauf si tu considères le cas où ms et ml valent 1 en même temps, ce qui n'arriverait pas avec une variable booléenne.

En simplifiant ton algorithme et en évitant les répétitions, tu obtiendras un code plus clair, avec moins d'erreurs et elles seront plus faciles à trouver. Bon courage.
Modifié par Ostara (06 Jul 2020 - 21:38)

Bonsoir,
Je vous remercie de votre réponse !

Je débute en Jquery et mon fonctionnement n'est pas le bon et je m'en rend bien compte avec le nombre de répétition pour un fonctionnement.. Mais malheureusement je galère un petit peu..

Apres mure réflexion, est-ce possible, pour commencer l'affichage de mes SVG, qu'au ".click" l'élément présent soit retiré pour afficher le bon directement? Car pour le moment je suis obligé de mettre des conditions pour chaque élément affiché avec ".is(':visible'))" pour effectuer le bon ".toggle();" pour l'affichage.. ce qui duplique déjà mes conditions et mon code..

Voici ma méthode, mais est-ce possible qu'au "$("#model2").click" de récupérer et de "reset " directement l'élément affiché et de toggle #subli2 automatiquement en une seule ligne?

$("#model2").click(function () {
	if($("#subli3").is(':visible')) { 
        $("#subli3").toggle();
        $("#subli2").toggle();
	}
        if($("#subli1").is(':visible')) { 
        $("#subli1").toggle();
        $("#subli2").toggle();
        }
}

Si oui comment? xD J'imagine que je vais devoir me pencher sur les booleans pour les conditions d'affichage?

Je vous remercie d'avance de votre lecture et de votre aide !
Bien à vous,
NeSo
Modifié par NeSo (06 Jul 2020 - 23:16)

Tu vas devoir chercher la solution tout seul.

Si j'écris ton algorithme, ça donnerait quelque chose comme ça :

Lorsque l'on clique sur la miniature d'un tshirt
Alors le svg correspondant est affiché
Et les autres svg sont cachés

Donc déjà, la méthode toggle n'est pas adaptée puisqu'elle inverse la visibilité, ce qui t'oblige à tester la visibilité de chaque élément avant. Donc il faudrait plutôt une méthode qui affiche un élément et une autre qui le cache.

Ensuite, il faudrait trouver un moyen de sélectionner plusieurs éléments en même temps. Car avec $("#subli1"), tu n'en sélectionnes qu'un et on veut cacher tous les autres. Ou plus simplement, on veut cacher tous les svg, puis afficher celui qu'on veut.

Bonjour,

La solution est difficile a trouvée.. Ça fait des jours que je tourne en rond en essayant de trouver un moyen de réaliser cette page aha.. Et pour une personne qui n'avait jamais touché du Jquery il y a 1 semaine.. Je suis parvenu quand même a un résultat xD !

J'imagine que je devrais plutôt me pencher sur les .hide() et .show() ? Mais comment récupérer l'élément affiché ? La seule méthode que je trouve est le ".is(':visible'))" Mais je suis obligé d'y placer une Div devant et donc tester toutes les div possible avec des conditions comme dans ma méthode..

Bonjour,

Un mot sur le code HTML : tu utilises des boutons pour les couleurs et c'est bien ; tu devrais en faire de même pour le design et les manches, avec un contenu texte décrivant le contenu qui peut rester caché.
(90% du temps) Si ça se clique, c'est soit un bouton pour une action soit un lien qui mène quelque part (autre page ou ancre dans la page). Hors champs de formulaire évidemment.

<button type="button"><img src="..." alt="Design à bandes dégradées horizontales de directions alternées"></button>
<!-- ... -->
<button type="button">Manches courtes</button>

EDIT: et ensuite il est maintenant relativement facile de faire ressembler un bouton à ce que l'on souhaite (border et background-color en particulier).

Pour afficher / masquer, une grosse astuce pas de moi et utilisée par exemple sur les accordéons : au lieu de t'embêter à déterminer qu'est-ce qui est visible afin de le cacher pour ensuite afficher 1 truc prévu, tu peux plus rapidement tout cacher puis afficher le truc prévu !
La différence est que tu caches des éléments déjà cachés : aucun problème à ça

Cibler plusieurs éléments : quand tu dois rendre visibles la #manche-c1, la #manche-c2, la #manche-c3 et la #manche-c4 (je réinvente des id), il est plus simple et lisible de cibler tous les éléments avec la classe .manche-courte
Modifié par Felipe (07 Jul 2020 - 09:39)

Bonjour Felipe,

Merci pour vos conseils, je vais me pencher la dessus également.
Avec les conseils de Ostara j'ai donc opté pour du .hide()

$("#sprimont-model").click(function () { 
	$("#subli4").hide();
	$("#subli2").hide();
	$("#subli3").hide();
	$("#subli1").show()
});

$("#model2").click(function () {
	$("#subli1").hide();
	$("#subli3").hide();
	$("#subli4").hide();
	$("#subli2").show();
});
    
$("#model3").click(function () {
	$("#subli1").hide();
	$("#subli2").hide();
	$("#subli4").hide();
	$("#subli3").show();
});
	
$("#model4").click(function () {
	$("#subli1").hide();
	$("#subli2").hide();
	$("#subli3").hide();
	$("#subli4").show();
});

Ce qui est vrai.. facilite le code et enlève les conditions. ( en espérant que ma méthode de .hide() est bonne? xD ) Je me repenche également sur l'affichage des manches avec cette méthode.
Modifié par NeSo (07 Jul 2020 - 10:30)

C'est tout à fait ça.

Maintenant, tu as 4 fonctions qui font la même chose : cacher 3 éléments et en afficher un. Il faudrait les regrouper en une seule. Comme dit précédemment, tu pourrais déjà simplifier ces fonctions en cachant tous les svg sans distinction pour n'afficher que celui qui doit l'être.

Tu peux récupérer un élément à partir d'une de ses classes css, pas seulement son id, même si la classe n'a pas de règle css rattachée. Les sélecteurs jQuery permettent de récupérer plus d'un élément à la fois si plusieurs éléments possèdent la même classe css par exemple.