我如何使用 html 和 echo 将 onclick 函数添加到我的 php 代码中

学习者

所以我写了这段代码，我想在 img 中添加一个 onclick，问题是当我添加一个 onclick 时，我需要使用分号并且回声结束，我该怎么做？

php:

echo '<div id="cloth"> <img src="' . $row["Image_url"] . '" width="300" height="400" alt="' . $row["Name"] . '" style="margin: 15px;" id="' . $row["Name"] . '"></div>';

我想补充的是：

onclick="product('" . $row["name"] . "')"

我希望它看起来像这样：

echo '<div id="cloth"> <img src="' . $row["Image_url"] . '" width="300" height="400" alt="' . $row["Name"] . '" style="margin: 15px;" id="' . $row["Name"] . '" onclick ="product("' . $row["Name"] . '")"></div>';

js产品功能：

function product(id) {
    var title = document.getElementById(id);
    sessionStorage.setItem("title", id);
    window.location.replace("product.php");
}

阿戴森

看起来这个问题与分号完全无关。引号是你的问题。尝试

echo '<div id="cloth"> <img src="' . $row["Image_url"] . '" width="300" height="400" alt="' . $row["Name"] . '" style="margin: 15px;" id="' . $row["Name"] . '" onclick ="product(\'' . $row["Name"] . '\')"></div>';

因此，您将单引号放在 onclick 属性内（以与围绕它的双引号形成对比） - 这样浏览器就不会混淆哪一部分是属性，哪一部分是其中的硬编码字符串。

这将输出类似

<div id="cloth"> <img src="lfkgjdfg" width="300" height="400" alt="dfggkk" style="margin: 15px;" id="dfggkk" onclick ="product('dfggkk')"></div>

或者，停止使用内联点击属性，而是使用addEventListener创建不显眼的事件处理程序，这些事件处理程序不会弄乱您的 HTML，并将代码和标记分开——这通常会使代码更清晰、更可测试和更易于维护。

为了完成这项工作，需要对标记进行一些小的调整，以便 JS 可以识别元素，并在单击时从中收集正确的 name 属性。

注意：我假设您的页面中实际上可能有几个这样的图像，所以我使用一个类来识别所有应该可点击的图像，并将事件处理程序附加到所有这些图像：

PHP：

echo ' <img src="' . $row["Image_url"] . '" width="300" height="400" alt="' . $row["Name"] .'" style="margin: 15px ;" class="clothImg" data-name="' . $row["Name"] . '">'; JavaScript：

document.addEventListener('DOMContentLoaded', function() { //wait until page is fully loaded
  let images = document.querySelectorAll(".clothImg"); //find images
  images.forEach(function(img) {
    img.addEventListener("click", function() { //add click handler
      product(this.dataset.name); //get name and pass to product function
    });
  });
});

function product(name) {
    sessionStorage.setItem("title", name);
    window.location.replace("product.php");
}

使用 PHP 示例输出的现场演示：

document.addEventListener('DOMContentLoaded', function() { //wait until page is fully loaded
  let images = document.querySelectorAll(".clothImg"); //find images
  images.forEach(function(img) {
    img.addEventListener("click", function() { //add click handler
      product(this.dataset.name); //get name and pass to product function
    });
  });
});

function product(name) {
    console.log(name); //just for demo
    //sessionStorage.setItem("title", name);
    //window.location.replace("product.php");
}

<div id="cloth"> <img src="lfkgjdfg" width="300" height="400" alt="dfggkk" style="margin: 15px;" class="clothImg" data-name="dfggkk">
<img src="lblahvjhjkfg" width="300" height="400" alt="2222rd" style="margin: 15px;" class="clothImg" data-name="2222rd"></div>