Mi JSP genera dos botones con la misma identificación, pero cuando hago clic en él, solo quiero cambiar el estilo en el que hago clic. Este es mi código JSP:
<%for(MetodoPagamentoBean m : result){%> <button class="method-1" id="metodo-pagamento-scelto"> <span><ion-icon name="card"></ion-icon><ion-icon class="checkmark" name="checkmark-circle" id="carta-scelta" style="display:none;"></ion-icon></span> <span><b>Numero:</b> <%= "XXXX XXXX XXXX " + m.getNumeroCarta().substring(m.getNumeroCarta().length()-4) %></span> <span><b>Intestatario:</b> <%= m.getNomeIntestatario()%></span> </button> <%} %>mientras que mi jQuery es:
$("#metodo-pagamento-scelto").click(function(){ $("#carta-scelta").show(); $("#metodo-pagamento-scelto").css("border", "2px solid green"); });¿Cómo puedo corregir este comportamiento?
class="metodo-pagamento-scelto".css() cuando no sea necesario. Use .toggleClass() o addClass() de jQuery en su lugar.this en jQuery como $(this) para referirte al evento currentTarget Element $(".metodo-pagamento-scelto") // Use classes .on("click", function() { // Use the .on() Method $("#carta-scelta").show(); $(this).addClass("active"); // Use $(this) to refer to the clicked button });CSS:
.metodo-pagamento-scelto.active { border: 2px solid green; }