我在循环中有这段代码,即:每个删除按钮和 csrf token 显示的次数与数据库记录的次数一样多:
<% for (const products of approved) { %>
<li>
<div class="list-box-listing">
<div class="list-box-listing-img"><a href="#"><img src="../<%= products.image %>" alt=""></a></div>
<div class="list-box-listing-content">
<div class="inner">
<h3><a href="#"><%= products.title %></a></h3>
<span><%= products.address.city %>, <%= products.address.suburb %></span>
<div class="star-rating">
<h5>Added <%= moment(products.createdAt).fromNow() %></h5>
</div>
</div>
</div>
</div>
<div class="buttons-to-right">
<a href="edit-listing/<%= products._id %>" class="button gray edit"><i class="sl sl-icon-note"></i> Edit</a>
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<a href="#" class="button gray delete" data-id="<%= products._id %>"><i class="sl sl-icon-close"></i> Delete</a>
</div>
</li>
<% } %>
我想获取与单击的按钮位于同一区域的 csrf token 的值。
document.body.addEventListener("click", e => {
if (!e.target.matches(".delete")) return;
e.preventDefault();
const deleteBtn = e.target;
const csrf = document.querySelector("[name=_csrf").value;
const productId = deleteBtn.dataset.id;
console.log(csrf);
});
我尝试使用“最接近”,但那是一个史诗般的失败。
const deleteBtn = e.target;
const csrf = deleteBtn.closest("[name=_csrf]").value;
我也试过:
const csrf = deleteBtn.parentNode.querySelector("[name=_csrf]").value;
但这给了我错误:
Uncaught TypeError: Cannot read property 'value' of null at HTMLBodyElement.document.body.addEventListener.e
最佳答案
在演示中 e.currentTarget
已更改自:
document.body.addEventListener(...
到:
document.querySelector('.buttons-to-right').addEventListener(...
使用 previousElementSibling
,参见演示 1。如果这不起作用,请尝试使用 e.currentTarget
然后从那里获取引用,参见Demo 2。顺便说一句,您可以将以下内容应用于 <a>
用于按钮的 anchor :
<a href="#/" ...
正斜杠 /
禁用跳跃的默认行为,因此您不必使用 e.preventDefault()
.
演示1
const getCSRF = e => {
const tgt = e.target;
if (tgt.matches(".delete")) {
const input = tgt.previousElementSibling;
const csrf = input.value;
const productId = tgt.dataset.id;
console.log(csrf);
}
};
document.querySelector('.buttons-to-right').addEventListener("click", getCSRF);
<li>
<div class="list-box-listing">
<div class="list-box-listing-img"><a href="#"><img src="../<%= products.image %>" alt=""></a></div>
<div class="list-box-listing-content">
<div class="inner">
<h3>
<a href="#"></a>
</h3>
<span></span>
<div class="star-rating">
<h5>Added </h5>
</div>
</div>
</div>
</div>
<div class="buttons-to-right">
<a href="edit-listing/<%= products._id %>" class="button gray edit"><i class="sl sl-icon-note"></i> Edit</a>
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<a href="#/" class="button gray delete" data-id="<%= products._id %>"><i class="sl sl-icon-close"></i> Delete</a>
</div>
</li>
演示2
const getCSRF = e => {
const tgt = e.target;
const cur = e.currentTarget;
if (tgt.matches(".delete")) {
const input = cur.querySelector('[name=_csrf]');
const csrf = input.value;
const productId = tgt.dataset.id;
console.log(csrf);
}
};
document.querySelector('.buttons-to-right').addEventListener("click", getCSRF);
<li>
<div class="list-box-listing">
<div class="list-box-listing-img"><a href="#"><img src="../<%= products.image %>" alt=""></a></div>
<div class="list-box-listing-content">
<div class="inner">
<h3>
<a href="#"></a>
</h3>
<span></span>
<div class="star-rating">
<h5>Added </h5>
</div>
</div>
</div>
</div>
<div class="buttons-to-right">
<a href="edit-listing/<%= products._id %>" class="button gray edit"><i class="sl sl-icon-note"></i> Edit</a>
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<a href="#/" class="button gray delete" data-id="<%= products._id %>"><i class="sl sl-icon-close"></i> Delete</a>
</div>
</li>
关于javascript - 如何在单击按钮时获取最近的隐藏输入字段的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54199629/