Tengo varios botones que muestran y ocultan la clase. Que también activa los elementos cada clic de alternancia. Quiero que sea un código más corto y hacerlo globalmente. Por favor, ayúdame a hacerlo. Todo lo que quiero es lograr un código menor y lo mismo con el resultado. Gracias.
$('.show').on('click', function () { $(this).addClass('inactive'); $('.hide').removeClass('inactive'); $('.helloworld').removeClass('inactive') }) $('.hide').on('click', function () { $(this).addClass('inactive'); $('.show').removeClass('inactive'); $('.helloworld').addClass('inactive') }) $('.ok').on('click', function () { $(this).addClass('inactive'); $('.cancel').removeClass('inactive'); $('.thanks').removeClass('inactive') }) $('.cancel').on('click', function () { $(this).addClass('inactive'); $('.ok').removeClass('inactive'); $('.thanks').addClass('inactive') }) <style> .inactive{ display:none; } button{ padding:5px 25px; color: #fff; background-color:#1d9bf0; margin-top: 10px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="show"> + Show </button> <button class="hide inactive"> - Hide </button> <p class="helloworld inactive">Hello WOrld</p> <br> <button class="ok"> + Ok </button> <button class="cancel inactive"> - Cancel </button> <p class="thanks inactive">Thank you</p>La técnica que está buscando aquí es DRY, o Don't Repeat Yourself. Para hacer esto, busque los patrones comunes en la lógica que tiene.
En este caso, cada botón tiene su texto actualizado y cambia el estado de su hermano siguiente. Por lo tanto, puede colocar atributos de class comunes en los elementos para que se pueda aplicar la misma lógica JS a todos. Desde allí, puede usar los métodos transversales DOM de jQuery para relacionar los elementos entre sí, y también los atributos de data para almacenar metadatos personalizados sobre los elementos que se pueden usar cuando se produce el evento de clic.
Finalmente, puede usar toggleClass() para agregar/eliminar las clases para mostrar/ocultar los elementos según sea necesario.
Aquí hay un ejemplo de trabajo:
$('.toggle').on('click', e => { let $btn = $(e.target); $btn .text(() => $btn.data($btn.hasClass('show') ? 'hide-text' : 'show-text')).toggleClass('show') // update text .next().toggleClass('inactive'); // toggle related content }) <style> .inactive { display: none; } button { padding: 5px 25px; color: #fff; background-color: #1d9bf0; margin-top: 10px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toggle-container"> <button class="toggle show" data-show-text="+ Show" data-hide-text="- Hide">+ Show</button> <p class="content inactive">Hello WOrld</p> </div> <div class="toggle-container"> <button class="toggle show" data-show-text="+ Ok" data-hide-text="- Cancel">+ Ok</button> <p class="content inactive">Thank you</p> </div>