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

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

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能够识别元素，并在单击时从中收集正确的名称属性。

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

PHP:

echo'<img src="$行["Image_url"]"宽度＝"；300〃；高度＝"；400〃；alt="$行["名称"]"style＝"；边距：15px"class＝"；clothImg"；数据名称="$行["名称"]"gt；'；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>

相关内容

最新更新

热门标签：