Tengo cuatro botones, cada uno de los cuales decide qué velocidad debe tener el ventilador en una habitación de hotel. Entonces, si el usuario hace clic en un botón, los otros botones deben estar en modo APAGADO. ¿Alguna idea sobre cómo lograrlo?
Ahora tengo cuatro botones que los usuarios pueden activar simultáneamente, lo que no tiene sentido para mi aplicación.
$("#wentAOnOff").click(function() { $.ajax({ url:'do', type:'POST', data: { actions:[ {action: "set", what: "mbt", id: "1175", val: 1}, {action: "set", what: "mbt", id: "1062", val: 1}, ] }, success: function(res) { }, error : function() { } }); }); $("#went1OnOff").click(function() { $.ajax({ url:'do', type:'POST', data: { actions:[ {action: "set", what: "mbt", id: "1176", val: 1}, {action: "set", what: "mbt", id: "1062", val: 1}, ] }, success: function(res) { }, error : function() { } }); }); $("#went2OnOff").click(function() { $.ajax({ url:'do', type:'POST', data: { actions:[ {action: "set", what: "mbt", id: "1177", val: 1}, {action: "set", what: "mbt", id: "1062", val: 1}, ] }, success: function(res) { }, error : function() { } }); }); $("#went3OnOff").click(function() { $.ajax({ url:'do', type:'POST', data: { actions:[ {action: "set", what: "mbt", id: "1178", val: 1}, {action: "set", what: "mbt", id: "1062", val: 1}, ] }, success: function(res) { }, error : function() { } }); });Usar una clase y atributos de datos
const $went = $(".went")// all 4 buttons by class .on("click", function() { // any of them const id1 = this.dataset.id1; const id2 = this.dataset.id2; $went.removeClass("active"); $(this).addClass("active"); /* $.ajax({ url:'do', type:'POST', data: { actions:[ {action: "set", what: "mbt", id: id1, val: 1}, {action: "set", what: "mbt", id: id2, val: 1}, ] }, success: function(res) { }, error : function() { } }); */ }); .active { background-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="went" data-id1="1175" data-id2="1062">Off</button> <button class="went" data-id1="1176" data-id2="1062">Off</button> <button class="went" data-id1="1177" data-id2="1062">Off</button> <button class="went" data-id1="1178" data-id2="1062">Off</button>no me queda tan claro cual es el problema, apagar los otros 3 botones o las llamadas ajax? ¿Qué no tiene sentido?
De todos modos, puede iterar todos los botones en cada click y desactivar los que no son el botón en el que hizo clic el usuario. Puede usar jQuery para obtener todos los botones e iterarlos. Debido a que tiene la ID del elemento en el que se hizo clic, puede desactivar todos los demás botones.
Tomé prestado gran parte de esto de https://stackoverflow.com/a/72828887/125981 pero agregué la capacidad de apagar todos los ventiladores con un solo clic; y alternó el texto en CSS mediante el uso de un atributo de datos que no alteró las clases.
const $went = $(".went"); // all 4 buttons by class $went.on("click turnoff", function(event) { // any of them const id1 = this.dataset.id1; const id2 = this.dataset.id2; this.dataset.fan = this.dataset.fan === "off" ? "on" : "off";; if (event.type === "turnoff") { this.dataset.fan = "off"; } let mydata = { actions: [{ action: "set", what: "mbt", id: id1, val: 1 }, { action: "set", what: "mbt", id: id2, val: 1 }, ] }; /* $.ajax({ url:'do', type:'POST', data:mydata }) .done(result){}) .fail(xrf){}); */ }); $('.all-off').on('click', function() { $went.trigger('turnoff'); }); .went[data-fan="on"] { background-color: #ddffdd; } .went[data-fan="on"]:after { content: 'On'; } .went[data-fan="off"] { background-color: #ffdddd; } .went[data-fan="off"]:after { content: 'Off'; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="went" data-id1="1175" data-id2="1062" data-fan="off"></button> <button class="went" data-id1="1176" data-id2="1062" data-fan="off"></button> <button class="went" data-id1="1177" data-id2="1062" data-fan="off"></button> <button class="went" data-id1="1178" data-id2="1062" data-fan="off"></button> <button class="all-off">All Off</button>