單擊具有相同 ID 的多個元素

Question

我的 JSP 生成了兩個具有相同 ID 的按鈕，但是當我單擊它時，我只想要我單擊的那個按鈕來更改樣式。 這是我的 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>
 <%} %>

而我的 jQuery 是：

$("#metodo-pagamento-scelto").click(function(){
  $("#carta-scelta").show();
  $("#metodo-pagamento-scelto").css("border", "2px solid green");
});

我該如何糾正這種行為？

Answer 1

• 修復您的 JSP。創建具有相同 ID 的多個元素是糟糕的編程和標記習慣的明顯標志。 使用類代替： class="metodo-pagamento-scelto"
• 不必要時不要使用.css() 。 請改用 jQuery 的.toggleClass()或addClass() 。
• 在 jQuery 中使用this像$(this)來引用事件 currentTarget 元素

$(".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;
}