时间戳

首页 > 解决方案 > Javascript不在php循环中打印

javascript - Javascript不在php循环中打印

问题描述

php 和 javascript 的新手。我正在尝试在 php 循环中使用 javascript 打印一个 id，但没有任何结果。这是代码：

$sql = "SELECT dueDate, assignmentName, className FROM assignments INNER JOIN classes ON assignments.class = classes.id ORDER BY DATE(dueDate)";
if ($result = mysqli_query($link, $sql)) {
  if (mysqli_num_rows($result) > 0) {
    echo "Assignments";
    while ($row = mysqli_fetch_array($result)) {
      echo '<div class="popup" id="popup">';
      echo '<div class="overlay"></div>';
      echo '<div class = "content">' . $row['dueDate'] . $row['className'] . '</div>';
      echo '<div class="close-btn content" onclick="togglePopup()">&times;</div>';
      echo '<div class = "btn-group">' . '<button onclick="togglePopup()">' . $row['assignmentName'] . '</button>' . '</div>';
      echo '</div>';
      echo '<script type=\"text/javascript\">  document.write(printID()); </script>';
    }
  }

标签： javascriptphp

解决方案

问题是，您希望 PHP 知道printID()它是什么以及它应该做什么。PHP 对 JavaScript 函数一无所知，因为 JavaScript 和 PHP 在完全不同的地方执行。PHP 呈现您的 HTML 并向您的浏览器发送响应，该浏览器执行 JavaScript。当 PHP 处理数据时，JavaScript 不会被执行。

你可以做一件事。等到所有内容都呈现并在</body>标记之前的 HTML 末尾执行您的 JavaScript 函数。

document.addEventListener('DOMContentLoaded', (event) => {
    const elements = document.querySelectorAll('.popup');
    Array.prototype.forEach.call(elements, (element) => {
        let id = printID();
        element.appendChild(document.createTextNode(id));
    });
});

上面的代码片段是什么？它等待并将被执行，直到所有 DOM 被加载。然后它使用名为“popup”的 css 类搜索所有元素。顺便说一句，您的代码中还有另一个问题。您正在使用循环处理数据库查询结果，并且正在使用 id 属性。Id 属性只能在您的标记中使用一次。所以请使用 css 类而不是 id 属性。使用类名“popup”时，您可以读出所有元素并执行您的 javascript 函数printID()并附加一个新元素。而已。

您的失败在于，您没有认识到 JavaScript 是一种客户端语言，并且不是由 php 执行的。即使它是用 html 模板编写的。

一种可能的更好的方法

正如您所说，您想更改togglePopupJavaScript 函数中的参数。以下代码显示了一个可能的解决方案。

<?php
...
$i = 0;
while ($row = mysqli_fetch_array($result)) {
    echo '<div class="popup">';
    echo '<div class="overlay"></div>';
    echo '<div class = "content">' . $row['dueDate'] . $row['className'] . '</div>';
    echo '<div class="close-btn content">&times;</div>';
    echo '<div class = "btn-group">' . '<button id="popup-' . $i . '">' . $row['assignmentName'] . '</button>' . '</div>';
    echo '</div>';
    $i++;
}

与其放置 onclick 属性，不如将其省略。而是在按钮元素上放置一个 id 参数。请记住，id 参数的值必须是唯一的。除了使用 id 属性，您还可以使用数据属性，例如data-id="my-value". 数据属性确保该属性的值不必是唯一的。只是为了向您展示可能的方法...

在</body>标签之前的 HTML 末尾放置以下内容。

<script>
    const togglePopup = (event) => {
        let target = event.target;
        let id = target.getAttribute('id');

        // do something with the id attribute
    }
    
    document.addEventListener('DOMContentLoaded', (event) => {
        const elements = document.querySelectorAll('.popup button[id^="popup-"]');
        Array.prototype.forEach.call(elements, (element) => {
            element.addEventListener('click', togglePopup);
        });
    });
</script>

这个小片段为元素内的每个按钮添加了一个单击事件处理程序，该元素的类.popup具有以 . 开头的 id 属性popup-。单击此按钮时，将调用 togglePopup 函数。在这个函数内部，id 属性来自目标元素。

使用此解决方案，您可以保持 html 标记干净，并且所有 javascript 内容都与 php 代码分离。

推荐阅读