Boutons javascript

Fermé
nass6906 Messages postés 30 Date d'inscription lundi 16 mars 2015 Statut Membre Dernière intervention 17 avril 2018 - 11 avril 2018 à 10:59
nass6906 Messages postés 30 Date d'inscription lundi 16 mars 2015 Statut Membre Dernière intervention 17 avril 2018 - 17 avril 2018 à 13:15
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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié le 11 avril 2018 à 22:27
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
nass6906 Messages postés 30 Date d'inscription lundi 16 mars 2015 Statut Membre Dernière intervention 17 avril 2018
17 avril 2018 à 13:15
merci je vais tester
0