javascript - 如何在单击按钮时获取最近的隐藏输入字段的值

Question

我在循环中有这段代码，即:每个删除按钮和 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

Answer 1

在演示中 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>