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

用户名

我在循环中有以下代码，即：每个删除按钮和csrf令牌显示的次数与数据库记录的次数相同：

<% 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令牌的值。

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;

但这给了我错误：

未捕获的TypeError：无法在HTMLBodyElement.document.body.addEventListener.e读取null的属性“值”

zer00ne

在演示中，其e.currentTarget已更改为：

document.body.addEventListener(...

至：

document.querySelector('.buttons-to-right').addEventListener(...

使用previousElementSibling，请参见演示1。如果那不起作用，请尝试使用e.currentTarget，然后从那里获取参考，请参阅演示2。顺便说一句，您可以将以下内容<a>应用于按钮的锚点：

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。