如何修复jQuery中的图片源问题？仅最后一个纯文本元素正常工作

我来帮你揪出问题的根源——你这段代码里前三个元素没正常工作，全是因为用错了jQuery的方法，咱们一步步理清楚：

1. like1和like2：选错了元素来修改src #

你后端输出的按钮结构里，<img>是嵌套在<button>标签内部的，而你现在直接给<button>设置src属性——但button标签本身根本没有src这个属性啊！

看你后端的按钮代码：

echo "<button id='like1post" . $post . "user" . $user . "' onclick='likeFunction(1, " . $post . ", " . $user . ")'> <img src='logo/likedone.png' width='20'> </button>";

正确的做法是选中button内部的<img>元素，再修改它的src：

// 给选择器加上" img"，定位到按钮里的图片
$("#like1post" + post + "user" + user + " img").attr("src", "helloone.png"); 
$("#like2post" + post + "user" + user + " img").attr("src", "hellotwo.png"); 

2. like3：用错了方法插入HTML #

.text()方法是专门用来设置纯文本内容的，如果你想插入HTML代码（比如<img>标签），必须用.html()方法。你现在用.text()的话，浏览器会把<img src='hellothree.png'>当成普通文字显示，而不会解析成图片。

把like3的代码改成：

$("#like3post" + post + "user" + user).html("<img src='hellothree.png'>"); 

修正后的完整代码 #

把上面两处修改完，代码就能正常工作了，最终的代码片段是：

if (reaction == 1) { 
  $("#like1post" + post + "user" + user + " img").attr("src", "helloone.png"); 
  $("#like2post" + post + "user" + user + " img").attr("src", "hellotwo.png"); 
  $("#like3post" + post + "user" + user).html("<img src='hellothree.png'>"); 
  $("#like4post" + post + "user" + user).text("Like 4"); 
  $("#likeCountPost" + post).text(data); 
}

内容的提问来源于stack exchange，提问作者Sakib