如何使用html和echo将onclick函数添加到php代码中
如何使用html和echo将onclick函数添加到php代码中
提问于 2021-05-21 07:59:02
我编写了这段代码，我想在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");
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-21 08:36:43
看起来这个问题与分号一点关系都没有。引号是你的问题。试一试
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：
回声‘
‘；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>
相关文件：
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
按照同样的思路，您也可以停止使用内联高度、宽度和样式属性，而使用CSS规则，这将应用于整个元素类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67632919
复制相关文章
相似问题
腾讯云开发者
