Tengo un conjunto de 4 botones, que se usan para mostrar/ocultar todas las imágenes dentro de la página, lo cual funciona muy bien. Cuando se hace clic en un botón individual, cambia el texto del botón interno de "OCULTAR TODO" a "MOSTRAR TODO".
Sin embargo, todos los demás botones siguen siendo los mismos.
¿Cómo puedo hacer que todos los demás botones también cambien el texto?
Hasta ahora probé esto, que funciona con un botón a la vez; me gustaría cambiarlos todos a la vez:
$('.HideDisplay').click(function() { var $this = $(this); $this.toggleClass('HideDisplay'); if ($this.hasClass('HideDisplay')) { $this.text('HIDE ALL'); $(this).css('color', 'black'); $(this).css("background-color", "#f1f1f1"); $(this).hover(function() { $(this).css("background-color", "#dedede"); }, function() { $(this).css("background-color", "#f1f1f1"); }); } else { $this.text('DISPLAY ALL'); $(this).css('color', 'white'); $(this).css("background-color", "#009E60"); $(this).hover(function() { $(this).css("background-color", "#008000"); }, function() { $(this).css("background-color", "#009E60"); }); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> </head> <body> <p><button id="button" class="HideDisplay">HIDE ALL</button></p> <p><button id="button2" class="HideDisplay">HIDE ALL</button></p> <p><button id="button3" class="HideDisplay">HIDE ALL </button></p> <p><button id="button4" class="HideDisplay">HIDE ALL</button></p> </pre> </body> </html>En su caso, necesita usar el selector "button[id*='button']" para cambiar todos sus botones porque si usa el selector por clase, funcionará la primera vez, pero luego, cuando haga clic en la segunda vez, no 't porque la clase será eliminada por la función toggleClass. Además, debe cambiar el texto de la pantalla con el mismo selector y dentro, si puede establecer una variable con la etiqueta que desea usar, verifique el código a continuación:
$('.HideDisplay').click(function() { var $this = $(this); var textToDisplay = ''; if (!$this.hasClass('HideDisplay')) { textToDisplay = 'HIDE ALL'; $this.css('color', 'black'); $this.css("background-color", "#f1f1f1"); $this.hover(function() { $this.css("background-color", "#dedede"); }, function() { $this.css("background-color", "#f1f1f1"); }); } else { textToDisplay = 'DISPLAY ALL'; $this.css('color', 'white'); $this.css("background-color", "#009E60"); $this.hover(function() { $(this).css("background-color", "#008000"); }, function() { $(this).css("background-color", "#009E60"); }); } $("button[id*='button']").toggleClass('HideDisplay'); $("button[id*='button']").text(textToDisplay); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> </head> <body> <p><button id="button" class="HideDisplay">HIDE ALL</button></p> <p><button id="button2" class="HideDisplay">HIDE ALL</button></p> <p><button id="button3" class="HideDisplay">HIDE ALL </button></p> <p><button id="button4" class="HideDisplay">HIDE ALL</button></p> </pre> </body> </html>En lugar de usar id para seleccionar los elementos y hacer cambios por separado, hay una forma alternativa de hacerlo con un código más limpio usando querySelectorAll() que le permite seleccionar todos los elementos con una clase específica y luego hacer todos los cambios deseados en todos los elementos usando un bucle.
Considere lo siguiente con JavaScript simple
$('.HideDisplay').on('click', function(){ const btns = document.querySelectorAll('.HideDisplay'); for(btn of btns){ if(btn.innerText === 'HIDE ALL'){ btn.innerText = 'DISPLAY ALL'; btn.style.backgroundColor = 'green'; btn.style.color = 'white'; } else{ btn.innerText = 'HIDE ALL'; btn.style = null; } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p><button class="HideDisplay">HIDE ALL</button></p> <p><button class="HideDisplay">HIDE ALL</button></p> <p><button class="HideDisplay">HIDE ALL </button></p> <p><button class="HideDisplay">HIDE ALL</button></p>