如何識別與多個ID

Question

在我的項目一個HTML元素的二代身份證，在JSP頁面中的一個有這樣的HTML結構：

<table id="hor-minimalist-a" class="campos"> 
    <thead> 
    <tr>  
     <th>Campo</th> 
     <th>#</th> 
    </tr> 
    </thead> 
    <tfoot> 
    <tr> 
    <td> <input type="text" name="nome_campo"> </td> 
    <td> <button type="button" id="incluir_campo" class="btn btn-link">Incluir</button> </td> 
    </tr> 
    <tr> 
    <td> <div id="result_incluir_campo"></div> </td> 
    <td> <div id="result_excluir_campo"></div> </td> 
    </tr> 
    </tfoot> 

    <c:forEach var="item_key" items="${campos}"> 
    <tr id="linha_campo_${item_key}"> 
    <td> <input type="text" value="${item_key}"> </td> 
    <td> <button type="button" id="excluir_campo_${item_key}" class="btn btn-link">Excluir</button> </td> 
    </tr> 
    </c:forEach> 
</table> 

注行：

<button type="button" id="excluir_campo_${item_key}" class="btn btn-link">Excluir</button> 

我有一個jQuery函數與之關聯：

<c:forEach var="item_key" items="${campos}"> 
<script> 
$("#excluir_campo_${item_key}").on("click", function() { 
    $.ajax({ 
     type: "GET", 
     url: "<c:out value="${pageContext.request.contextPath}/key/remove_campo"/>", 
     cache: false, 
     data: {nome: "${item_key}"} 
    }).done(function(data){ 
     if(data == "yes") { 
      $("#linha_campo_${item_key}").remove(); 
     } 
     else if(data == "not"){ 
      $("#result_excluir_campo").empty().append("erro"); 
     } 
     else { 
      $("#result_excluir_campo").empty().append("sem acesso"); 
     } 
    }); 
}); 
</script> 
</c:forEach> 

我使用JSTL，但我面臨的一些問題，這個解決方案，因爲我的列表可以upda動態地。

採取在考慮我從此元素更改ID：

<button type="button" id="excluir_campo_${item_key}" class="btn btn-link">Excluir</button> 

這個兩（分離電流Id的兩個「條款」）：

excluir_campo ${item_key} 

有什麼辦法來檢測在secong ID與jquery的功能類似於：

$("#excluir_campo").on("click", function() { 
    var second_id = ???; 
    $.ajax({ 
     type: "GET", 
     url: "<c:out value="${pageContext.request.contextPath}/key/remove_campo"/>", 
     cache: false, 
     data: {nome: "<second_id>"} 
    }).done(function(data){ 
     if(data == "yes") { 
      $("#linha_campo_<second_id>").remove(); 
     } 
     else if(data == "not"){ 
      $("#result_excluir_campo").empty().append("erro"); 
     } 
     else { 
      $("#result_excluir_campo").empty().append("sem acesso"); 
     } 
    }); 
}); 

或者有別的辦法來完成ŧ他上面代碼的結果是一樣的嗎？

Answer 1

首先，從不使用任何類型的循環在呈現的html中生成腳本。如果你有1000件物品呢？ 1000倍你的代碼，效率非常低。您可以使用寫入通用函數並呈現該調用者。這樣，你可以節省數千行！其次，永遠不要使用生成的id和id的函數！你可以爲這個功能使用泛型類，你不需要id選擇器。你只需要像「鑰匙」的附加屬性：

<div class="my-functionality" data-key="15" /> 
    <div class="my-functionality" data-key="16" /> 
    <div class="my-functionality" data-key="17" /> 
    <div class="my-functionality" data-key="18" /> 

，你可以直接在循環使用或者生成的腳本或jquery's each selector將事件綁定到你的元素：你可以用你的點擊事件，如：

$('.my-functionality').each(function(index, elem){ 
     $(elem).click(function(){ 
      //do you stuff here! 
      var key = $(elem).data('key'); //this will read data-key attribute 
     }); 

    });