Rendre un code de sélection dynamique

Version imprimable

Bonjour.
actuellement j'ai une liste de menu avec un code javascript comme ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
$( function(){
        $('#nbrpersonne1').hide();
        $('#mb1').on('change', function(){
            if( $(this).is(':checked')){
                $("#nbrpersonne1").slideDown();
            }
             else{
                 $("#nbrpersonne1").slideUp();
            }
        });
    });

qui me permet d'afficher ou cacher le nombre de personne pour le menu
maintenant j'aimerai le rendre dynamique car je ne sais pas combien de menu mon client va mettre il peux en mettre moins que ce que j'ai prévus ou plus. et donc il faudrait que code s'adapte en fonction.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( function(){
        $('input[^nbrpersonne]').hide();
        $('input:checkbox[^mb]').on('change', function(){
            //recupérer l'id et le découper pour obtenir de la id checkbox
            var str = document.getElementById(this).getAttribute('id');
            var num = str.substr(3);
            if( $(this).is(':checked')){
                $("#nbrpersonne"+num).slideDown();
            }
             else{
                 $("#nbrpersonne"+num).slideUp();
            }
        });
    });

Je suis novice en javascript et donc je ne sais pas comment y arriver.

16/10/2017, 16h19
SpaceFrog

c'est quoi ce selecteur ?

Code:

$('input[^nbrpersonne]')
16/10/2017, 16h20
fleedalfire

C'est une id, dans mon html j'ai un compte en php qui attribue un chiffre a chaque passage
exemple : #nbrpersonne1 puis #nbrpersonne2, etc.
16/10/2017, 16h31
SpaceFrog
pourquoi ne pas prendre un name ou une class que tu peux mettre sur plusieurs inputs ..

sinon avec des id qui "commencent par"
Code:

1 2 $('[id^=nbrpersonne]')
16/10/2017, 16h40
fleedalfire

c'est ce que je voulais écrire et je me suis planté, je voulais $('[id^=nbrpersonne]') écrire les id qui commence par.
Est-ce que la te semble correcte ?
16/10/2017, 16h44
SpaceFrog

Une syntaxe plus rigoureuse :

Code:

$("[id^='nbrpersonne']")

Et seulement si les elements existent sur la page au chargement ( document ready )
Sinon il faudra passer par le on par délégation (3 paramètres)
16/10/2017, 16h50
fleedalfire

oui car le chargement des javascript ce fait à la fin de la page, donc oui.
mais ça n'affiche toujours pas l'input #nbrpersonne cacher.
16/10/2017, 17h03
SpaceFrog

https://jsfiddle.net/4embttm2/

C'est pas tout a fait ce que je voulais, voilà mon code html, j'ai donc un input #mb qui me permet d'afficher l'input #nbpersonne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div class="row">
                <?php $cpt = 1; ?>
                <?php $compteur = 1; ?>
                <!-- Je fais une boucle sur $resultat_prix pour afficher tant qu'il y a quelque chose dedans -->
                <?php while ($prix_menubanquet = mysqli_fetch_assoc($resultat_prix)) {?>
                <div class="col s12 m6 l6">
                    <div class="row margebottom">
                        <!-- Compteur pour les id mb et nbrpersonne, pour le javascript de cacher et afficher -->
                        <?php if($compteur <= $prix_menubanquet["id_menu_banquet"]){?>
                        <div class="col s12 m5 l5">
                            <input name="menubanquet[]" value="menu<?php echo $prix_menubanquet["id_menu_banquet"] ?>" type="checkbox" id="mb<?php echo $compteur ?>"/>
                            <label for="mb<?php echo $compteur ?>">Menu à réserver</label>
                        </div>
                        <div id="nbrpersonne<?php echo $compteur ?>" class="col s12 m7 l7">
                            <div class="row margebottom">
                                <div class="col s6 m6 l6">
                                    <input name="nb_personne<?php echo $prix_menubanquet["id_menu_banquet"] ?>" type="number" min="1" max="20" value="1"/>    
                                </div>
                                <div class="col s6 m6 l6">
                                    <button class="btnnbrpersonne" disabled>Nombre de personne</button>
                                </div>
                            </div>
                        </div>
                        <?php }
                        $compteur++?>
                    </div>
                    <div class="row margebottom">
                        <div class="col s12 m12 l12">
                            <div class="card boxPlat">
                                <div class="card-image">
                                    <img class="responsive-img" src="<?php echo $prix_menubanquet["lien_images"] ?>">
                                </div>
                                <div class="card-content">
                                    <div class="row">
                                        <div class="col s12 m12 l12">
                                            <!--J'affiche et concatène prix1-->
                                            <h3 class="titremb">Menu <span class="dumb">à </span><?php echo $prix_menubanquet["prix_menu"]; ?><span class="chfmb"> CHF</span></h3>
                                        </div>
                                    </div>
                                    <!-- Je fais une boucle sur $resultat1 pour afficher tant qu'il y a quelque chose dedans -->
                                    <?php
                                    //je creer une requete sql qui me donne ref_plat et descriptif de la table menu_plat et du au faite que j'ai fait une jointure entre ref_menu_banquet de la table menu_plat avec  
                                    //id_menu_banquet de la table menu_banquet et une autre jointure entre ref_plat de la table menu_plat avec id_plat de la table plat sur ref_menu_banquet = id_menu_banquet
                                    $sql_menubanquet = "SELECT * FROM menu_plat JOIN plat JOIN menu_banquet ON menu_plat.ref_menu_banquet = menu_banquet.id_menu_banquet AND menu_plat.ref_plat = plat.id_plat WHERE ref_menu_banquet = '".$prix_menubanquet["id_menu_banquet"]."' GROUP BY ref_genre_des_plats ASC";
                                    
                                    //je fait une condition qui verifie si la connexion c'est bien passe
                                    if(mysqli_errno($connexion) != 0){
                                        die ('ERREUR '.mysqli_error($connexion));
                                    }
                                    //j'execute la requete sql
                                    $resultat_menubanquet = mysqli_query($connexion, $sql_menubanquet);
                                    
                                    while ($menubanquet = mysqli_fetch_assoc($resultat_menubanquet)){ ?>
 
                                    <p class="centrermenubanquet"><?php echo $menubanquet["descriptif"]; ?><br/></p>
 
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php
            if($cpt % 2 == 0) { ?>
            </div>
            <div class="row">
            <?php }
            $cpt++ ?>
                <?php } ?>
            </div>

avant j'avais ce code javascript qui était uniquement pour #nbpersonne1 ou #nbpersonne2 ou etc.

Code:

1
2
3
4
5
6
7
8
9
10
11
$( function(){
        $('#nbrpersonne1').hide();
        $('#mb1').on('change', function(){
            if( $(this).is(':checked')){
                $("#nbrpersonne1").slideDown();
            }
             else{
                 $("#nbrpersonne1").slideUp();
            }
        });
    });

et maintenant j'aimerai que le code soit dynamique, car je ne sais pas combien de menu il va créer
Je pensais à un genre de code comme ça, qui va recherche le nombre de l'id (#nbpersonne1 et #mb1) et qui va le rajouter dans la l'id qui est dans la conditions.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( function(){
        $('[id^=nbrpersonne]').hide();
        $('[id^=mb]').on('change', function(){
            //recupérer l'id et le découper pour obtenir de la id checkbox
            var str = document.getElementById(this).getAttribute('id');
            var num = str.substr(3);
            if( $(this).is(':checked')){
                $("#nbrpersonne"+num).slideDown();
            }
             else{
                 $("#nbrpersonne"+num).slideUp();
            }
        });
    });

17/10/2017, 10h10
SpaceFrog

un exemple :
https://jsfiddle.net/ypz83kjx/

sinon tu peux passer par des data- sur tes checkboxes pour les lier aux inputs ...
17/10/2017, 10h32
fleedalfire

Merci.
ça marche, par contre je devais mettre "[id^='nbrpersonne']" et non name car c'est l'id qui est a le compteur. ça marche jusqu'au 9 et le 10 il le considère comme le 1.
Est-ce que tu aurais une solutions pour qu'il considère 10 comme 10 et non 1 ?
17/10/2017, 10h50
SpaceFrog

Oui désolé, je m'en suis aperçu juste après, je voulais te le signaler mais j'ai été pris par autre chose ... (un truc qui s'appelle un métier ... :roll:)

il suffit de récupérer tous les numériques

Code:

menuid = $(this).attr('id').match(/\d+/)[0];

avec la gestion en data il n'y aurait pas ce souci
17/10/2017, 11h00
fleedalfire

Merci.
J'imagine bien que tu travail et j'avais le temps, pour moi le boulot et passe toujours en premier et j'aurai compris si le temps de tes réponses était plus long, c'est normal.