Tengo alrededor de 40 botones en el proyecto, pero mi ejemplo muestra solo cuatro. Mi código es muy repetitivo y me pregunto si hay un enfoque o lenguaje más ligero. Me gustaría ocultar o cambiar el estilo de los botones en los que se hizo clic.
$("[data-id='1']").on('click', function() { $("[data-id='1']").css('visibility', 'hidden'); }); $("[data-id='2']").on('click', function() { $("[data-id='2']").css('visibility', 'hidden'); }); $("[data-id='3']").on('click', function() { $("[data-id='3']").css('visibility', 'hidden'); }); $("[data-id='4']").on('click', function() { $("[data-id='4']").css('visibility', 'hidden'); }); button { margin: 20px 0 0 20px; padding: 5px 30px } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button data-id='1' class="hope">1</button> <button data-id='2' class="hope">2</button> <button data-id='3' class="hope">3</button> <button data-id='4' class="hope">4</button>Gracias http://jsfiddle.net/05cempj7/
Esta función opera en todos los elementos que tienen la clase .hope .
$(".hope").on('click', function() { $(this).css('visibility', 'hidden'); }); Si se hace clic en cualquier clase de esperanza $(".hope") , entonces $(this) remite al elemento en el que se hizo clic.