Optimisation de code jquery Formulaire à base de display none -> b

Bonjour à tous

Je suis en train de construire un formulaire permettant d’établir un devis.

J'ai commencé avec une structure ou chaque étape (ou question) sera dans une section.

A chaque fois qu'une réponse est cliqué (ça sera des radio ici), la section actuelle passe en display none, et la suivant en display block (.hide(), .show() ).

Et avec ça un bouton sur chaque section pour un retour à la section précédente.

J'ai réussi à le faire mais c'est long et répétitif. J'aimerais trouver une solution avec une utilisation des parent/frère pour automatiser un peut plus tout ça. J'ai essayer plein de chose mais rien n'a abouti

Voici le style de code, attention aux yeux pour les plus avertis

       $("input[name=forme]").click(function() {               ////////////////////////////////////////////////// FORME
            console.log("click1");
            $('#section_forme').hide();
            $('#section_fond').fadeIn();
        });

                $("#btn-return-1").click(function() {               /////////////////////////////////////////// RETURN 1
                    console.log("click-return !");
                    $('#section_fond').hide();
                    $('#section_forme').fadeIn();
                });

        $("input[name=fond]").click(function() {               //////////////////////////////////////////////////// FOND
            console.log("click2");
            $('#section_fond').hide();
            $('#section_escalier').fadeIn();
        });

                $("#btn-return-1").click(function() {               /////////////////////////////////////////// RETURN 1
                    console.log("click-return !");
                    $('#section_fond').hide();
                    $('#section_forme').fadeIn();
                });

        $("#escalier_oui").click(function(){               //////////////////////////////////////////////// ESCALIER NON
            console.log("click3");
            $('#section_escalier').hide();
            $("#section_plage").fadeIn();
        });

                $("#btn-return-1").click(function() {               /////////////////////////////////////////// RETURN 1
                    console.log("click-return !");
                    $('#section_fond').hide();
                    $('#section_forme').fadeIn();
                });

        $("#escalier_non").click(function(){              ///////////////////////////////////////////////// ESCALIER OUI
            console.log("click3");
            $('#section_escalier').hide();
            $("#section_volet").fadeIn();
        });

        $("#Plage_oui").click(function(){               ////////////////////////////////////////////////////// PLAGE OUI
            console.log("click3");
            $('#section_esc0').hide();
            $("#section_esc1").fadeIn();
        });

                $("#Plage_oui").click(function(){
                    $(".liner-pool-without-shore").hide();
                    $(".liner-pool-with-shore").fadeIn();
                });

                $("#Plage_non").click(function(){
                    $(".liner-pool-with-shore").hide();
                    $(".liner-pool-without-shore").fadeIn();
                });

        $("#Plage_non").click(function(){               ////////////////////////////////////////////////////// PLAGE NON
            console.log("click4");
            $('#section_esc1').hide();
            $("#section_esc0").fadeIn();
        });

        $("input[name=escalier_sans_plage]").click(function() {          //////////////////////////////////// SANS PLAGE
            console.log("click5");
            $('#section_esc0').hide();
            $('#section_plage').hide();
            $('#section_marches').fadeIn();
        });

        $("input[name=escalier_plage]").click(function() {             ////////////////////////////////////// AVEC PLAGE
            console.log("click6");
            $('#section_esc1').hide();
            $('#section_plage').hide();
            $('#section_marches').fadeIn();
        });

        $("input[name=marches]").click(function() {             //////////////////////////////////////////////// MARCHES
            console.log("click7");
            $('#section_marches').hide();
            $('#section_volet').fadeIn();
        });

                $("#volet_oui").click(function(){
                    console.log("click3");
                    $('#section_volet').hide();
                    $('#section_coffre').fadeIn();
                });

                $("#volet_non").click(function(){
                    console.log("click4");
                    $('#section_volet').hide();
                    $('#section_dimensions').fadeIn();
                });

        $("input[name=coffre]").click(function() {             ////////////////////////////////////////////////// COFFRE
            console.log("click8");
            $('#section_coffre').hide();
            $('#section_dimensions').fadeIn();
        });

        $(".btn-cust-1").click(function() {              ////////////////////////////////////////////////// /// BOUTON 1
            console.log("click9");
            $('#section_dimensions').hide();
            $('#section_couleur').fadeIn();
        });

        $(".btn-cust-2").click(function() {              /////////////////////////////////////////// COULEUR LINER
            console.log("click9");
            $('#section_couleur').hide();
            $('#section_frise').fadeIn();
        });

        $(".btn-cust-3").click(function() {              ////////////////////////////////////////////////// FRISE
            console.log("click9");
            $('#section_frise').hide();
            $('#section_contact').fadeIn();
        });

Merci pour votre aide

Ou si vous avez des liens sur des articles à lire pour m'aider à m’améliorer !

Quelqu'un pourrait m'aiguiller svp?

Bonjour,

Tu peux utiliser un tableau pour stocker les informations pour chaque élément et faire ensuite une boucle sur ce tableau. Ci-dessous le code pour tes 3 premiers éléments. Il suffit de rajouter les ligne a[3]=[...], a[4]=[...], a[5]=[...] etc. pour les autres éléments.

var a=[];
a[0] = ['input[name=forme]', 'click1', '#section_forme', '#section_fond'];
a[1] = ['#btn-return-1', 'click-return !', '#section_fond', '#section_forme'];
a[2] = ['input[name=fond]', 'click-return !', '#section_fond', '#section_escalier'];
// ...
// ajouter ici des a[n]=[...] pour les autres éléments
// ...

for(var k=0;k<a.length;k++)
	$(a[k][0]).click(function() {
		console.log(a[k][1]);
		$(a[k][2]).hide();
		$(a[k][3]).fadeIn();
	});

EDIT: ce code ne fonctionne pas; voir plus loin une solution qui marche.

Amicalement,
Modifié par parsimonhi (25 Nov 2020 - 17:46)

Merci beaucoup pour ton aide, je vais essayer d'utiliser ta méthode, qui a l'air super

Après plusieurs essais, j'ai comme un petit soucis, erreur dans la console:
Uncaught TypeError: can't access property 1, a[k] is undefined

Qui correspond à la ligne " $(a[k][0]).click(function() { "

Je ne comprend pas pourquoi il n'arrive pas à accéder a la première ligne

a[0] = ['input[name=forme]', 'click1', '#section_forme', '#section_fond'];

Modifié par louyi (25 Nov 2020 - 11:59)

Bonjour,

Tu as une erreur dans ton code, mais ailleurs que dans la ligne que tu montres.

Que vaut k au moment de l'erreur ?

Est-ce que a[k] est bien définie plus haut dans le code pour la valeur de k qui fait l'erreur ?

Amicalement,

J'ai laissé uniquement tes 3 tableaux, K vaut bien 3.
Je peux accéder à 'a[0][0]' qui vaut bien "input[name=forme]",
et a[0] vaut : Array(4) [ "input[name=forme]", "click1", "#section_forme", "#section_fond" ]

C'est comme si k ne valait pas [0] au premier tour de boucle :x

Je comprend pas pourquoi définir k vu que k est utilisé uniquement dans la boucle en itération. J'ai essayé de définir :
var k = 0, var k = 1, var k... mais sans succès.



ps: l'erreur js dans la console se produit bien au click sur un des "input[name=forme]".
Modifié par louyi (25 Nov 2020 - 14:33)

Bonjour,

k (en minuscule) doit prendre les valeurs 0, 1, et 2. Quand il vaut 3, c'est que la boucle est fini. Il s'agit d'une boucle toute simple.

As-tu bien utilisé le code que j'ai donné plus haut ou bien autre chose ?

As-tu compris ce qu'est une boucle ?

Amicalement,

Oui je pense que j'ai compris ce qu’était une boucle ^^
J'ai bien copié collé ton code.
k est bien en minuscule partout.

A chaque tour de boucle, k est remplacé par 0, puis 1, puis 2, puis 3, fin de boucle, si j'ai bien compris.

Si je remplace k par 0 et supprimant la boucle ca fonctionne, comme ceci:

        var a=[];
        a[0] = ['input[name=forme]', 'click1', '#section_forme', '#section_fond'];
        a[1] = ['#btn-return-1', 'click-return !', '#section_fond', '#section_forme'];
        a[2] = ['input[name=fond]', 'click-return !', '#section_fond', '#section_escalier'];
        // ...
        // ajouter ici des a[n]=[...] pour les autres éléments
        // ...

            $(a[0][0]).click(function() {
                console.log(a[0][1]);
                $(a[0][2]).hide();
                $(a[0][3]).fadeIn();
            });

Je ne comprend pas pourquoi k n'est pas remplacé automatiquement par 0 au premier tour de boucle :x
Modifié par louyi (25 Nov 2020 - 15:41)

Bonjour,

Quand tu mets le code avec la boucle, tu utilises quoi ? mon code exactement ?

Montre ce code !

Amicalement,

Voici:

        var a=[];
        a[0] = ['input[name=forme]', 'click1', '#section_forme', '#section_fond'];
        a[1] = ['#btn-return-1', 'click-return !', '#section_fond', '#section_forme'];
        a[2] = ['input[name=fond]', 'click-return !', '#section_fond', '#section_escalier'];
        // ...
        // ajouter ici des a[n]=[...] pour les autres éléments
        // ...

        for(var k=0;k<a.length;k++)
            $(a[k][0]).click(function() {
                console.log(a[k][1]);
                $(a[k][2]).hide();
                $(a[k][3]).fadeIn();
            });

un copié-collé de ton code

J'ai essayé avec les accolades comme ceci, même résultat :

for(var k=0;k<a.length;k++){
            $(a[k][0]).click(function() {
                console.log(a[k][1]);
                $(a[k][2]).hide();
                $(a[k][3]).fadeIn();
            });
        }

Modifié par louyi (25 Nov 2020 - 16:06)

ok merci je reste en stand-by

Bonjour,

J'ai posté un code dans ma réponse précédente à l'instant !

Amicalement,

Au top, ça fonctionne parfaitement
Je vais me pencher dessus car j’ai un peu de mal à comprendre comment k est utilisé dans l'appel de la fonction et n dans l'exécution , sans que l'un n’écrase l’autre.
Merci encore infiniment

Bonjour,

J'aurais dû voir que le premier code que j'avais donné ne pouvait pas fonctionner. J'ai été un vrai mickey sur ce coup. Une faute de débutant.

Enfin bon, l'essentiel est que ça marche maintenant.

Ça fonctionne,
je me demande pour une étapes avec 3 actions à effectuer, je les laisse en dessous écrit comme avant (ce qui fonctionne), ou je refait un tableau avec une nouvelle boucle à 4 étapes?

J'ai 2 étapes de ce format :

        
$("input[name=escalier_plage]").click(function() {
            console.log("click");
            $('#section_plage_oui').hide();
            $('#section_plage').hide();
            $('#section_marches').fadeIn();
        });

Ou rajouter une condition dans la boucle style

if (a[n] > 3){
            $(a[k][0]).click(function() {
                console.log(a[n][1]);
                $(a[n][2]).hide();
                $(a[n][3]).hide();
                $(a[n][4]).fadeIn();
            });

Merci encore
Modifié par louyi (26 Nov 2020 - 10:08)

Bonjour,

1) tu modifies tes tableaux en mettant ce qui concerne le fadeIn() à l'indice 2.
2) tu mets ensuite aux indices 3, et éventuellement 4, et éventuellement 5 etc. ce qui concerne les hide().

Alors tu peux utiliser le code suivant pour tous tes éléments :

for(var k=0;k<a.length;k++)
{
	let n=k;
	$(a[k][0]).click(function() {
		console.log(a[n][1]);
		for(var k=3;k<a[n].length;k++) $(a[n][k]).hide();
		$(a[n][2]).fadeIn();
	});
}

Amicalement,

Merci je vais essayer