Javascript 如何在div中使用clickable image按钮，并在单击图像后调用js脚本函数？

我在图像缩略图附近添加了一个可单击的图像按钮，但由于某些原因，该图像不可单击，并且不会将任何值传递给它调用的函数（类似postLike函数）。下面是我在js fiddle中得到的示例：

有谁能看看它，告诉我为什么我的可点击图像按钮没有启动

具有可单击按钮的部分代码：

<div id='like"+pageurl+"' style='float: right; padding: 5px 2px 2px;'> <img class='liker' onclick=postLike("+imageurl+","+username+","+albumPicurl+","+userid+","+pageurl+","+time+","+text+") src='"+likeimage+"' border='0'></div>

编辑： 一旦用户单击按钮，我想更改按钮图像和它调用的函数，使之与下面不同，但它不起作用！（以下代码不*强文本*替换图像按钮）

$（'like+e+'）.html（“”）；

代码：

函数postLike（a、b、c、d、e、f、g）{
警报（“你好，世界！”）；
警报（“imageURL:+a+”\nuserName:+b+”\nalbumPicurl:+c+”\nuserId:+d+“\nPageURL:+e+”\nTime:+f+”\nText:+g）；
$（'like+e+'）.html（“”）；
}
var imageurl=”http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong","四川,"中国.JPG",；
var username=“tim”；
var albumPicurl=”http://somesite.com/albumpic.jpg";
var userid=“34545”；
var pageurl=”http://somesite.com/page2.html";
var time=“345435”；
var text=“lifeiscool”；
var fullname=“smith”；
var likeimage=”https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTyTZ5jtJ3VxrorGg0ywxXfEstaZWce2he-_6LSgFwsnch6xYUm”；
$（“.content”）。追加（“”）；

哇，真是一团糟。难怪里面有语法错误。例如，您没有将字符串传递给postLike（）函数。可能还有很多其他的错误，我都懒得去发现

<img class="liker" onclick="postLike(http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG,tim,http://somesite.com/albumpic.jpg,3453454545,http://somesite.com/page2.html,34534545435,lifeiscool)" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTyTZ5jtJ3VxrorGg0ywxXfEstaZWce2he-_6LSgFwsnch6xYUm" border="0">

---

这真是一堆格式糟糕的代码。如果您更好地使用空白（包括换行符）对其进行格式化和/或进行一些基本的浏览器控制台（

console.log（）

）调试，则更明显的是您正在创建一个内联

onclick=

属性，其中包含不带引号的字符串值

您的代码生成以下字符串：

<img class="liker" onclick="postLike(http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_S…umpic.jpg,3453454545,http://somesite.com/page2.html,34534545435,lifeiscool)"

<img class='liker' onclick='postLike("http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG","tim","http://somesite.com/albumpic.jpg","3453454545","http://somesite.com/page2.html","34534545435","lifeiscool")'

即使您解决了这个问题，您的fiddle也不会工作，因为您的

postLike（）

函数声明位于默认的

onload

包装器内（如左侧面板中所指定），而inline

onEvent=

属性只能调用全局函数

工作版本：

---

既然您使用的是jQuery，为什么不去掉内联的

onclick=

，用jQuery创建处理程序？

您看到JSFIDLE站点中的演示了吗？我正在将变量传递给postLink函数。问题是函数调用不正确！可点击的按钮在它自己的外部附加工作，但当我添加到附加然后停止工作！！希望有人告诉我函数调用的哪一部分是错误的！

<img class="liker" onclick="postLike(http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_S…umpic.jpg,3453454545,http://somesite.com/page2.html,34534545435,lifeiscool)"

<img class='liker' onclick='postLike("http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG","tim","http://somesite.com/albumpic.jpg","3453454545","http://somesite.com/page2.html","34534545435","lifeiscool")'

"onclick='postLike(\"" +imageurl+"\",\""+username+"\",\""+albumPicurl+"\",\""
+userid+"\",\""+pageurl+"\",\""+time+"\",\""+text+"\")'"