如何使用 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

ID在文档中必须是唯一的。所以停止在循环中使用静态 ID。链接去某处。如果您不导航，请不要使用链接。如果你想点击某些东西来触发 JS，请使用按钮。如果您不喜欢按钮的默认外观，请应用 CSS。帖子 ID 不是一种关系。不要滥用rel属性。（适当的用法类似于<a href="page2.html" rel="next">）data-*如果您需要将自定义数据与元素相关联，请使用属性。固有事件属性有一堆与之相关的问题。不要使用它们。请改用addEventListenerand friends。function active_del_modal(event) {&nbsp; const button = event.target;&nbsp; const id = button.dataset.postId;&nbsp; console.log({&nbsp; &nbsp; id&nbsp; });}document.querySelector("#delete-buttons").addEventListener("click", active_del_modal);button {&nbsp; border: none;&nbsp; background: none;&nbsp; colour: blue;&nbsp; cursor: pointer;}button:hover {&nbsp; text-decoration: underline;}<ul id="delete-buttons">&nbsp; <li><button type="button" data-post-id="$post_id">Delete</button></li>&nbsp; <li><button type="button" data-post-id="foo">Delete</button></li>&nbsp; <li><button type="button" data-post-id="bar">Delete</button></li></ul>

Answer 2

方法 1 - 最小变化onclick='active_del_modal(this)'&nbsp;你可以使用function active_del_modal(link) {&nbsp;&nbsp; var x = link.getAttribute("rel");&nbsp; alert(x);}方法 2 - 更好：window.addEventListener("load",function() {&nbsp; document.querySeletor("table").addEventListener("click",function(e) {&nbsp; &nbsp; const tgt = e.target, rel = tgt.getAttribute("rel");&nbsp; &nbsp; if (rel) alert(rel);&nbsp; })})我建议使用数据属性而不是 rel：如果将 id 更改为 class，则可以这样做window.addEventListener("load",function() {&nbsp; document.querySeletor("table").addEventListener("click",function(e) {&nbsp; &nbsp; const tgt = e.target;&nbsp; &nbsp; if (tgt.classList.contains("get_post_id")) {&nbsp; &nbsp; &nbsp; const id = tgt.dataset.id;&nbsp; &nbsp; &nbsp; console.log(id);&nbsp; &nbsp; }&nbsp; })})使用echo "<td><a data-id='$post_id' class='get_post_id'>Delete</a></td>";最后，如果链接应该删除该行，您可以这样做window.addEventListener("load",function() {&nbsp; document.querySeletor("table").addEventListener("click",function(e) {&nbsp; &nbsp; const tgt = e.target;&nbsp; &nbsp; if (tgt.classList.contains("delete")) {&nbsp; &nbsp; &nbsp; tgt.closest("tr").remove();&nbsp; &nbsp; }&nbsp; })})使用echo "<td><button type="button" class='delete'>Delete</button></td>";