Question

我在图像缩略图附近添加了一个可点击图像按钮，但由于某种原因，图像无法点击，并且它没有传递任何值来调用它（postLike函数）。在这里我得到了js小提琴的例子：

任何人都可以看一下并告诉我为什么我的可点击图片按钮没有被触发？

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

<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(" <img class='lb-liked' onclick='deleteLikeLB(&quot;" + a + "&quot;,&quot;" + b + "&quot;,&quot;" + c + "&quot;,&quot;" + d + "&quot;,&quot;" + e + "&quot;,&quot;" + f + "&quot;,&quot;" + g + "&quot;)' src='http://www.peppertt.com/wp-2013/wp-content/uploads/2011/06/Facebook-like-not.jpg' title='like' border='0' />");

代码：

function postLike(a, b, c, d, e, f, g) {
  alert("Hello World!");
  alert("imageURL:" + a + "\nuserName:" + b + "\nalbumPicurl:" + c + "\nuserId:" + d + "\nPageURL:" + e + "\nTime:" + f + "\nText:" + g);
  $('like+e+').html(" <img class='lb-liked' onclick='deleteLikeLB(&quot;" + a + "&quot;,&quot;" + b + "&quot;,&quot;" + c + "&quot;,&quot;" + d + "&quot;,&quot;" + e + "&quot;,&quot;" + f + "&quot;,&quot;" + g + "&quot;)' src='./liked.png' title='like' border='0' />");
}
var imageurl = "http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG";
var username = "tim";
var albumPicurl = "http://somesite.com/albumpic.jpg";
var userid = "3453454545";
var pageurl = "http://somesite.com/page2.html";
var time = "34534545435";
var text = "lifeiscool";
var fullname = "smith";
var likeimage = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTyTZ5jtJ3VxrorGg0ywxXfEstaZWce2he-_6LSgFwsnch6xYUm";
$(".content").append("<div id='grid-cell' style='padding:5px'><a style='text-decoration:none' href='./dl.php?name=brian&imageurl=" + imageurl + "'><img class='photo-grid' src='" + imageurl + "' width=200 height=200 title='" + username + "' /></a><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><div class='moreInfo2'><a style='color:#000;text-decoration:none' href='/" + username + "' target='_blank'>" + userid + "(" + fullname + ")</a></div></div>");


<div class="content"></div>

Answer 1

这真是一堆可怕的格式化代码。如果你通过更好地利用空格（包括换行符）和/或做了一些基本的浏览器控制台（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")'

注意作为函数参数的字符串值周围的引号？您需要调整代码以便生成这些引号，可能是这样的：

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

即使你解决了这个问题，你的小提琴也行不通，因为你的postLike()函数声明在默认的onload包装器内（如左边面板中所指定的），并且内联{{1属性只能调用全局函数。

工作版本：http://jsfiddle.net/ymdPa/6/

由于您正在使用jQuery，为什么不摆脱内联onEvent=并使用jQuery创建处理程序？

Answer 2

哇，多么难以理解的混乱。难怪那里有语法错误。例如，您没有将字符串传递给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">

如何使用div中的可点击图像按钮并在单击图像后调用js脚本函数？

2 个答案: