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

Question

我在 PHP 中有这个 while 循环<?phpwhile ($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) {

  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>

Answer 2

方法 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>";