Boutons javascript

nass6906 Messages postés 33 Statut Membre -  
nass6906 Messages postés 33 Statut Membre -
Bonjour,
voilà j'ai un soucis avec mes boutons Allumage et Extinction, en fait j'ai un bouton allumer et autre éteindre qui gèrent une LED, j'ai deux LEDs donc 4 boutons en tout, ce que je veux faire c'est quand je clique sur allumer y a une petite icone(image png ) qui s'affiche en dessous pour dire que la LED est allumer.
La j'ai juste fait les boutons et l'allumage je n'arrive à inclure les petites icônes.

<div class="boutons">
<div class="bouton0">
<div
<button id="btAllumeLED0" class="button success outline"> Allume LED0</button>
<p id="p1" style="display:none;"></p>
</div>

<div
<button id="btEteindreLED0" class="button alert outline"> Eteindre LED0</button>
<p id="p2" style="display:none;"></p>
</div>
</div>

<div class="bouton1">
<div
<button id="btAllumeLED1" class="button success outline"> Allume LED1</button>
<p id="p3" style="display:none;"></p>
</div>

<div
<button id="btEteindreLED1"class="button alert outline"> Eteindre LED1</button>
<p id="p4" style="display:none;"></p>
</div>
</div>
</div>
<div class="Initial">
<h3>By N.A</h3>
</div>
<!-- Le script qui permet d'appeller les autres pages qui permettent d'allumer les LEDs du WISE -->
<script>
$(function() { // On attend que la page soit complètement chargée (Document Ready)

$("#btAllumeLED0").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p1").load("AllumeLED0.php");
});

});

$(function() { // On attend que la page soit complètement chargée (Document Ready)

$("#btEteindreLED0").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p2").load("EteindreLED0.php");
});
});

$(function() { // On attend que la page soit complètement chargée (Document Ready)

$("#btAllumeLED1").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p3").load("AllumeLED1.php");
});

});

$(function() { // On attend que la page soit complètement chargée (Document Ready)

$("#btEteindreLED1").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p4").load("EteindreLED1.php");
});
});
</script>


1 réponse

  1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonsoir,

    Je suppose que les icones en question... sont dans les balises P qui sont masquées ??
    Donc si oui... ton code pourrait ressembler à :
    <div class="boutons">
     <div class="bouton0">
      <div>
       <button id="btAllumeLED0" data-id="1" data-led="0" data-action="ON" class="button btn-led  success outline"> Allume LED0</button>
       <p id="p1" style="display:none;"></p>
      </div>
    
      <div>
       <button id="btEteindreLED0" data-id="2" data-led="0" data-action="OFF" class="button btn-led  alert outline"> Eteindre LED0</button>
       <p id="p2" style="display:none;"></p>
      </div>
     </div>
    
     <div class="bouton1">
      <div>
       <button id="btAllumeLED1"  data-id="3" data-led="1" data-action="ON" class="button btn-led  success outline"> Allume LED1</button>
       <p id="p3" style="display:none;"></p>
      </div>
    
      <div>
       <button id="btEteindreLED1" data-id="4" data-led="1" data-action="OFF" class="button btn-led  alert outline"> Eteindre LED1</button>
       <p id="p4" style="display:none;"></p>
      </div>
     </div>
    </div>
    <div class="Initial">
    <h3>By N.A</h3>
    </div>
    <!-- Le script qui permet d'appeller les autres pages qui permettent d'allumer les LEDs du WISE -->
    <script>
    

    $(function() { 
     $(".btn-led").click(function(){ 
      var p_id = $(this).data('id');
      var action = $(this).data('action');
      var led = $(this).data('led');
      var FichierToLoad = action == "ON" ? "AllumeLED" : "EteindreLED" ;
      $("#p"+p_id).load(FichierToLoad+led);
      //on masque toutes les balises p qui sont dans la div du bouton cliqué
      $(".bouton"+led).find('p').hide();
      //on affiche celle qui nous interesse
      $("#p"+p_id).show();
      
     });
    });
    

    </script>
    


    0
    1. nass6906 Messages postés 33 Statut Membre
       
      merci je vais tester
      0