IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

click sur une serie de boutons


Sujet :

jQuery

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    mai 2022
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Conseil

    Informations forums :
    Inscription : mai 2022
    Messages : 2
    Points : 1
    Points
    1
    Par défaut click sur une serie de boutons
    Bonjour,
    J ai 7 boutons:["#btnf0","#btnf1","#btnf2","#btnf3","#btnf4","#btnf5","#btnf6"]
    quand je click sur un bouton je souhaite que celui ci devienne vert si il est rouge et vice-versa.
    par ailleurs je souhaite que l utilisateur ne puisse pas cliquer plus de 2 fois sur un bouton (pas pris en compte dans ce que j ai déjà fait).
    ma petite routine ne fonctionne pas. merci pour votre aide.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var TabFonction=["#btnf0","#btnf1","#btnf2","#btnf3","#btnf4","#btnf5","#btnf6"];
     
    $(document).ready(function(){ 
     
          $.each(TabFonction, function(value) {
     
            $(value).click(function() {
     
                $(this).data('clicked', true);
                if ($(value).data("clicked")) {
                var iswhat= $(value).css("background-color","red");
                     if(iswhat){
                                     $(value).css("background-color","green");
                    }else {
                                    $(value).css("background-color","red");
    };
    };
    });
    });

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 486
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 486
    Points : 14 462
    Points
    14 462
    Par défaut
    montrez nous un test complet avec le code html pour qu'on puisse tester.

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    mai 2022
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Conseil

    Informations forums :
    Inscription : mai 2022
    Messages : 2
    Points : 1
    Points
    1
    Par défaut
    Bonjour,
    Oui je vais essayer. je n'en suis qu'à mes débuts. merci

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    <!DOCTYPE html>
    <html>
     
    <head>
        <title>Le titre de ma page web</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="rangeslider.js"></script>
    </head>
    <header>
     
    </header>
     
    <body>
     
     
     
    	<div id="conteneur">
    		<div class="vitesse">
                <div classe="choixloco">
                    <button class="btncmdloco1" type="button" id="btnloco1" style="background-color:red;">Loco1OFF</button>
                   <button class="btncmdloco2" type="button" id="btnloco2" style="background-color:grey;">Loco2OFF</button>
                    </div>
                <div classe="SpeedReading">
                    <button class="btnvalidation" type="button" id="btnvalidation" style="background-color:grey;">Validation</button> 
                <p class="SpeedTrain">vitesse: <span id="demo"></span></p>
    		    </div>
                <div classe="SpeedSlider">
                <input type="range" oninput="FunctionSpeed(this.value)" min="1" max="128" value="50" class="slider" id="myRange" style="width:80%" ; ></input>
                </div>
        </div>
     
    		<div class="Cmd">
                <div class="CmdStartCentral">
                    <button class="btnCmd" type="button" id="btnStartCentral" style="background-color:red;">Central OFF</button>    
                </div>
               <div class = CmdRange> 
                   <button class="btnCmd" type="button" id="btnEmergency" style="background-color:grey;">Stop Emergency</button>
                   <button class="btnCmd" type="button" id="btnSmooth" style="background-color:grey;">Smooth Stop</button>
                </div>
               <div class = CmdRange> 
                   <button class="btnCmd" type="button" id="btnIDLE" style="background-color:grey;">IDLE</button>
                   <button class="btnCmd" type="button" id="btnGeneralStop" style="background-color:grey;">STOP ALL</button>
                </div>
     
     
     
    		</div>
     
    		<div class = "fonctions">
                           <div class = fonctionsrangeFL> 
                <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f0</button>
                           </div>
                <div class = fonctionsrange> 
                <button class="btnfonction" type="button" id="btnf1" style="background-color:red;">f1</button>
                <button class="btnfonction" type="button" id="btnf2" style="background-color:red;">f2</button>
                <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f3</button>
                <button class="btnfonction" type="button" id="btnf1" style="background-color:red;">f4</button>
                            </div>
                            <div class = fonctionsrange> 
                <button class="btnfonction" type="button" id="btnf2" style="background-color:red;">f5</button>
                <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f6</button>
                <button class="btnfonction" type="button" id="btnf1" style="background-color:red;">f7</button>
                <button class="btnfonction" type="button" id="btnf2" style="background-color:red;">f8</button>
                            </div>
                            <div class = fonctionsrange> 
                <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f9</button>
                <button class="btnfonction" type="button" id="btnf1" style="background-color:red;">f10</button>
                <button class="btnfonction" type="button" id="btnf2" style="background-color:red;">f11</button>
                <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f12</button>
               </div>
     
    		</div>
    	</div>
     
    </body>
     
    </html>
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    71
    72
    73
    74
    75
    76
    77
    #conteneur {
      display:flex;
      flex-wrap: wrap;
      justify-content:space-between;
      margin:50px;
    }
     
    .vitesse .choixloco {
      display: flex;
      flex-flow: nowrap;
    }
     
    .fonctions .btnfonction {
    height: 110px;
    width:110px;
    margin-bottom: 20px;
    }
     
    .fonctions .fonctionrange{
      display:flex;
      flex-wrap: wrap;
      justify-content:space-between;
    }
     
    .fonctions .fonctionsrangeFL .btnfonction{
      height: 120px;
      width:450px;
      margin-bottom: 20px;
    }
     
     
    .Cmd .cmdRange{
      display:flex;
      flex-wrap: wrap;
      justify-content:space-between;
    }
     
    .Cmd .btnCmd {
      height: 120px;
      width:120px;
      margin-bottom: 20px;
      }
     
      .Cmd .CmdStartCentral .btnCmd{
        height: 130px;
        width:  240px;
        margin-bottom: 20px;
        }
     
    .slider {
     
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
     
      }
     
      .vitesse .btncmdloco1{
        height: 150px;
        width:150px;
        margin-bottom: 20px;
        }
     
      .vitesse .btncmdloco2{
        height: 150px;
        width:150px;
        margin-bottom: 20px;
      margin-right:150px;
        }
     
        .vitesse .btnvalidation{
          height: 150px;
          width:150px;
          margin-bottom: 20px;
        margin-right:50px;
          }

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 259
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 259
    Points : 41 648
    Points
    41 648
    Par défaut
    Bonjour,
    déjà il y a incompréhension des méthodes utilisées :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var iswhat= $(value).css("background-color","red");
    cette ligne affecte une valeur CSS mais ne la lit pas, voir la documentation : jQuery.css(), de plus attention au format de retour de la méthode souvent source de souci.

    Dans ton cas il me semble préférable que tu passes par l'affectation/changement de classe CSS dédiées.

    Dans ton HTML tu remplaces les « styles inline » par
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button class="btnfonction btn-bg-color-red" type="button" id="btnf1">f1</button>
    ensuite tu définies les classes CSS, par exemple :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .btn-bg-color-grey {
      background-color:grey;
    }      
    .btn-bg-color-red {
      background-color:red;
    }
    .btn-bg-color-green {
      background-color:green;
    }

    Maintenant tu peux gérer la classe CSS suivant le cas
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // fonction commune au click
    function handleClick() {
      const classList = this.classList;
      // test sur les classes CSS
      if (classList.contains("btn-bg-color-red")) {
        classList.replace("btn-bg-color-red", "btn-bg-color-green");
      }
      else if (classList.contains("btn-bg-color-green")) {
        classList.replace("btn-bg-color-green", "btn-bg-color-red");
      }
    }
     
    // affectations événement au click
    const elemButtons = document.querySelectorAll("button");
    elemButtons.forEach((btn) => {
      btn.addEventListener("click", handleClick);
    })
    il te reste à adapter

  5. #5
    Membre du Club Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    novembre 2002
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : novembre 2002
    Messages : 39
    Points : 65
    Points
    65
    Par défaut
    Bonsoir à tous,

    Exemple pour un changement de couleur avec un compteur limité à 2 clicks.
    Pour les boutons, créer une class "redcolor" et un data-compteur avec une valeur de "2"

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <div class = "fonctions">
        <div class = fonctionsrangeFL> 
            <button class="btnfonction redcolor" type="button" id="btnf0" data-compteur="2">f0</button>
        </div>
            <div class = fonctionsrange> 
                <button class="btnfonction redcolor" type="button" id="btnf1" data-compteur="2">f1</button>
                <button class="btnfonction redcolor" type="button" id="btnf2" data-compteur="2">f2</button>
                <button class="btnfonction redcolor" type="button" id="btnf3" data-compteur="2">f3</button>
                <button class="btnfonction redcolor" type="button" id="btnf4" data-compteur="2">f4</button>
            </div>
            <div class = fonctionsrange> 
                <button class="btnfonction redcolor" type="button" id="btnf5" data-compteur="2">f5</button>
                <button class="btnfonction redcolor" type="button" id="btnf6" data-compteur="2">f6</button>
                <button class="btnfonction redcolor" type="button" id="btnf7" data-compteur="2">f7</button>
                <button class="btnfonction redcolor" type="button" id="btnf8" data-compteur="2">f8</button>
            </div>
            <div class = fonctionsrange> 
                <button class="btnfonction redcolor" type="button" id="btnf9" data-compteur="2">f9</button>
                <button class="btnfonction redcolor" type="button" id="btnf10" data-compteur="2">f10</button>
                <button class="btnfonction redcolor" type="button" id="btnf11" data-compteur="2">f11</button>
                <button class="btnfonction redcolor" type="button" id="btnf12" data-compteur="2">f12</button>
            </div>
     </div>

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /* les class  avec leur couleur */ 
     
    .redcolor {
      background-color: red;
    }
     
    .greencolor {
      background-color: green;
    }
     
    .graycolor {
      background-color: gray;
      pointer-events: none;
    }

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // En JQuery
            $('.btnfonction').on('click', function () {
                //Compteur pour deux click par bouton
                var compteur = parseInt($(this).attr('data-compteur')); // On récupère la valeur de l'attribut data-compteur   
     
                if (compteur > 0) { // Si supérieur à 0
                    $(this).attr('data-compteur', compteur -= 1); // On décompte
     
                    //Si compteur Ok alors on applique le changement de couleur sur le bouton
                    if ($(this).hasClass('redcolor')) { // on vérifie l'existence de la class
                        $(this).removeClass('redcolor').addClass('greencolor'); // Si la couleur est déjà rouge alors supprime la class "redcolor" et crée la class "greencolor"
                    } else {
                        $(this).removeClass('greencolor').addClass('redcolor'); // Sinon le l'inverse
                    }
                } else { // Compteur à 0
                    $(this).removeClass('greencolor redcolor').addClass('graycolor');
                }
            })

Discussions similaires

  1. calcul sur une serie
    Par redox1969 dans le forum Delphi
    Réponses: 3
    Dernier message: 16/09/2015, 19h26
  2. Calculer les mode et médiane sur une serie de données
    Par khaled87 dans le forum Méthodes exploratoires
    Réponses: 0
    Dernier message: 21/10/2014, 21h56
  3. Réponses: 4
    Dernier message: 05/10/2010, 20h26
  4. Style XP sur une fenêtre et bouton 'personnalisé'
    Par Sunchaser dans le forum C++Builder
    Réponses: 3
    Dernier message: 10/07/2007, 00h30
  5. Evénement sur une inputbox sans bouton ?
    Par The Molo dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 30/04/2007, 14h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo