如何使用 JavaScript 获取 while 循环（PHP）的值？答案

【问题标题】：How to get the value of while loop(PHP) using JavaScript?如何使用 JavaScript 获取 while 循环（PHP）的值？
【发布时间】：2020-10-02 14:39:46
【问题描述】：

我在 PHP 中有这个 while 循环

<?php
while ($row = mysqli_fetch_assoc($getPosts)) {
  $post_id = $row['post_id'];                  


 echo "<td><a rel='$post_id' id='get_post_id' 
 onclick='active_del_modal()'>Delete</a></td>";

}   
?>

在这个循环中，当我们点击“删除”链接时，变量“$post_id”的值会发生变化。我想在它发生变化时获取“$post_id”的值。我试过这个 JS 代码

function active_del_modal() { 
  var x = document.getElementById("get_post_id").getAttribute("rel");
  alert(x);
}

但它只给了我“$post_id”的最后一个值。我想在“$post_id”更改时获取每个值，并且该值应该是单独的，而不是像这样的 23 46 545 545 等。我不想使用像 jQuery 这样的任何框架。

【问题讨论】：

@TheCodesee 我知道如何在 jQuery 中做到这一点，但我想学习如何在没有 jQuery 的情况下做到这一点。
@PraveenKumar 如果你发布你的工作 jQuery 可能会更容易，然后我们可以帮助“切换”它到 vanilla JS
@mplungjan 请问，你能解释一下吗？
也不要在循环中重新使用用户 ID。 ID 必须是唯一的。你可以改用一个类
@PraveenKumar 查看我的更新答案

标签： javascript php while-loop

【解决方案1】：

方法 1 - 最小变化

onclick='active_del_modal(this)'

你可以使用

function active_del_modal(link) { 
  var x = link.getAttribute("rel");
  alert(x);
}

方法 2 - 更好：

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target, rel = tgt.getAttribute("rel");
    if (rel) alert(rel);
  })
})

我建议使用数据属性而不是 rel：

如果你把id改成class，你可以这样做

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("get_post_id")) {
      const id = tgt.dataset.id;
      console.log(id);
    }
  })
})

使用

echo "<td><a data-id='$post_id' class='get_post_id'>Delete</a></td>";

最后如果链接应该删除行，你可以这样做

window.addEventListener("load",function() {
  document.querySeletor("table").addEventListener("click",function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("delete")) {
      tgt.closest("tr").remove();
    }
  })
})

使用

echo "<td><button type="button" class='delete'>Delete</button></td>";

【讨论】：

【解决方案2】：

文档中的 ID 必须唯一。所以不要在循环中使用静态 ID。
链接到某个地方。如果您不导航，请勿使用链接。如果您想点击某些东西来触发 JS，请使用按钮。如果您不喜欢按钮的默认外观，请应用 CSS。
帖子 ID 不是关系的类型。不要滥用rel 属性。（适当的用法类似于 <a href="page2.html" rel="next">）如果您需要将自定义数据与元素相关联，请使用 data-* 属性。
内在事件属性有一堆与之相关的陷阱。不要使用它们。请改用addEventListener 和朋友。

function active_del_modal(event) {
  const button = event.target;
  const id = button.dataset.postId;
  console.log({
    id
  });
}

document.querySelector("#delete-buttons").addEventListener("click", active_del_modal);

button {
  border: none;
  background: none;
  colour: blue;
  cursor: pointer;
}

button:hover {
  text-decoration: underline;
}

<ul id="delete-buttons">
  <li><button type="button" data-post-id="$post_id">Delete</button></li>
  <li><button type="button" data-post-id="foo">Delete</button></li>
  <li><button type="button" data-post-id="bar">Delete</button></li>
</ul>

【讨论】：