javascript - 如何将javascript中的相同功能与a的multilpy按钮相关联?
问题描述
单击“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">×</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";
}
解决方案
您可以使用 JS 或 JQuery 事件处理请参考以下代码:
$('#myBtn').on('click', function(){
$('#myModal').modal('show');
});
推荐阅读
- python - 如何根据其中一个列值过滤掉 csv 文件中的一行?
- python - 如何为 user_id 跟踪正确设置全局站点代码 (gtag.js)
- django - APIView 上的 POST 请求的 Django RF 405 错误,没有结束斜线
- php - 对从多个 SQL 查询返回的 Ajax 数据执行某些操作
- python-3.x - 替换字符串中的连续子字符串
- mariadb - 无法升级 mariadb '您持有损坏的包裹'
- python-3.x - 我不知道我做错了什么。Python 一直告诉我我仍然缺少 3 个位置参数,即使我已经提供了它
- amazon-dynamodb - 在收到 DynamoDB 流事件后立即查询 GSI - 它可靠吗?
- javascript - NextJS 表单向 MongoDB 发送数据
- vb.net - 使用 VB 窗体执行 Word 文档 VBA 宏