如何将 javascript 中的相同函数关联到 <c: forEach> 的乘法按钮？

Question

我在单击 'Modifica' 按钮时打开模式时遇到问题。只有第一个按钮有效，我知道我不必为按钮分配 id。如何通过单击每个按钮打开模式（每个按钮都不同）？

这是 jsp 中的代码：

    <c:forEach items="${vettoredilavorazioni}" var="lavori">
<tr>
    <td>
        <c:out value="${lavori.nomelavorazione}" ></c:out><br>
    </td>
    <td><a target="_blank" href="<c:out value="${lavori.picturepath}"/>">
            <img class="imgg" height="400px" width="600px" src="<c:out value="${lavori.picturepath}"/>"/>
        </a>
    </td>
    <td>  
        <c:out value="${lavori.descrizione}" ></c:out><br>
        <c:forEach items="${Category}" var="category">      
            <c:if test="${lavori.categoria==category.id}">
                <c:out value="${category.name}" ></c:out><br>
            </c:if> 
        </c:forEach>    
    </td> 
</tr>
<input type="hidden" name="codiceprodotto" value="${lavori.id}">
<button class="w3-button" id="myBtn" >Modifica</button><br> 



<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Modifica il prodotto</h2>
        </div>
        <div class="modal-body">  
            <form  name="fileupload" action="Modificaprodotto" method="post" enctype="multipart/form-data" >
                Name:<input id="insname" type="text" name="nome" onchange="preview_nome(event)"  value="${lavori.nomelavorazione}"/><br/>
                Categoria:<select name="category" id="inscategoria"  onchange="preview_categoria(event)">
                    <c:forEach items="${Category}" var="category">   
                        <c:if test="${lavori.categoria==category.id}">
                            <option selected value=""><c:out value="${category.name}"/>
                            </option>
                        </c:if>
                    </c:forEach>
                    <c:forEach items="${Category}" var="c">
                        <option value="${c.id}">${c.name}</option>
                    </c:forEach>
                </select><br>
                Descrizione:<input id="insdescrizione" type="text" name="descrizione" onchange="preview_descrizione(event)" value="${lavori.descrizione}"/><br/>
                Immagine:<input id="upfile" type="file" name="immagine" onchange="preview_image(event)"><br/>
                <div class="w3-container" style="width:500px;height:500px">
                    <div class="w3-container w3-border w3-large">
                        <img id="output_image" src="picture/nopreview.png"> 
                        <h2 id="output_nome"></h2>  
                        <p id="output_descrizione"></p> 
                        <p id="output_categoria"></p>   
                    </div>
                </div>
                <button>Salva modifica</button>
            </form>
        </div>
    </div>
</div>
    </c:forEach>

这是 jsp 中的代码：

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

Answer 1

你可以使用JS或者JQuery事件处理请参考以下代码：

$('#myBtn').on('click', function(){
    $('#myModal').modal('show');

 });

Answer 2

使用这个外部循环，您可能会生成无效的 HTML 代码（具有相同 HTML-ID 的多个元素）。看这里How does jQuery work when there are multiple elements with the same ID value?

所以您在提供的截图中的所有 ID 可能会出现多次

id="myBtn"
id="myModal"
id="insname"
id="inscategoria"
id="insdescrizione"
id="upfile"
id="output_image"
id="output_nome"
id="output_descrizione"
id="output_categoria"

Javascript 在选择这些元素时可能会遇到很大的问题。浏览器会在控制台中警告您。最好使用像 class="js-mycomponent" 这样的专用类来进行选择或使用其他不会使您的标记无效的东西。

如何将 javascript 中的相同函数关联到 <c: forEach> 的乘法按钮？

How to associate the same function in javascript to multilpy button of a <c: forEach>?

javascript

java

simplemodal

jstl

button