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

Question

我在 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 这样的任何框架。

Answer 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>";

Answer 2

• ID 在文档中必须是唯一的。 所以停止在循环中使用 static ID。
• 在某处链接 go。 如果您不导航，请勿使用链接。 如果您想点击某些东西来触发 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>