如何将javascript中的相同功能与 ？ 的multilpy按钮相关联

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";
}

单击“ Modifica”按钮时，打开模态时出现问题。仅第一个按钮有效，并且我知道不必为该按钮分配ID。如何打开模态（哪个...

Answer 1

您可以使用JS或JQuery事件处理请参考下面的代码：