动态添加<；img>；通过PHP循环标记，通过在每个循环上调用JavaScript函数
我有一个PHP函数，它在数据库中循环图像结果，用HTML格式化它们，然后将包含HTML布局的变量返回到my page.PHP。这一切都可以正常工作，但在循环中，我有一些脚本标记，可以调用script.js文件中的函数。它需要两个参数（url和count）。我试图将结果的url从数据库传递给函数，创建一个新的动态添加<；img>；通过PHP循环标记，通过在每个循环上调用JavaScript函数,javascript,php,loops,innerhtml,appendchild,Javascript,Php,Loops,Innerhtml,Appendchild,我有一个PHP函数，它在数据库中循环图像结果，用HTML格式化它们，然后将包含HTML布局的变量返回到my page.PHP。这一切都可以正常工作，但在循环中，我有一些脚本标记，可以调用script.js文件中的函数。它需要两个参数（url和count）。我试图将结果的url从数据库传递给函数，创建一个新的img元素，并将传递的url附加到新创建的img标记的src属性。 到目前为止，这似乎是可行的-当我将结果记录到console.log中时，我得到了 不过，我在把它们放回前端时遇到了麻烦 下面
img
不过，我在把它们放回前端时遇到了麻烦
下面的代码显示了php循环的部分，后面是它在每个循环上调用的Javascript函数
public function getResultsHtml($page, $pageSize, $term) {
$fromLimit = ($page - 1) * $pageSize;
$query = $this->con->prepare("SELECT * FROM images
WHERE (title LIKE :term
OR alt LIKE :term) AND broken=0
ORDER BY clicks DESC
LIMIT :fromLimit, :pageSize");
$searchTerm = "%" . $term . "%";
$query->bindParam(":term", $searchTerm);
$query->bindParam(":fromLimit", $fromLimit, PDO::PARAM_INT);
$query->bindParam(":pageSize", $pageSize, PDO::PARAM_INT);
$query->execute();
$resultsHtml = "<div class='image-results'>";
$count = 0;
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
$count++;
$id = $row["id"];
$imgUrl = $row["imgUrl"];
$siteUrl = $row["siteUrl"];
$title = $row["title"];
$alt = $row["alt"];
if($title){
$displayText = $title;
} else if ($alt) {
$displayText = $alt;
} else {
$displayText = $imgUrl;
}
$resultsHtml .= "<div class='grid-item image$count'>
<a href='$imgUrl'>
<script>
document.addEventListener('DOMContentLoaded', function() {
loadImage(\"$imgUrl\", \"image$count\");
});
</script>
<span class='details'>$displayText</span>
</a>
</div>";
}
$resultsHtml .= "</div>";
return $resultsHtml;
}
目前我在前端没有得到任何结果。在页面源代码中，我可以看到每个锚标记中都有脚本标记，它们显示了预先加载了参数（loadImage）的函数(http://www.com，image22）
），但它实际上并没有从函数中得到返回
下面是jQuery的解决方案，但我真的不想使用jQuery
function loadImage(src, className) {
var image = $("<img>");
image.on("load", function() {
$("." + className + " a").append(image);
});
image.on("error", function() {
});
image.attr("src", src);
}
函数loadImage（src，类名）{
变量图像=$（“
我知道用.innerHTML
动态编写
标记会有一些问题，但我认为这不是问题所在，因为脚本标记是在调用函数之前编写的
我想我有一些错误的触发顺序，或者我缺少jQuery用.append函数自动处理的东西
我还尝试了aTag.appendChild（image）；
，但也没有结果
我已经使用jQuery几个月了，但我正在努力彻底学习Vanilla JS——我正在努力掌握jQuery函数实际上是如何工作的，而不仅仅是盲目地依赖它们
非常感谢您的帮助！请注意queryselectoral（）
返回类似NodeList（）的数组，因此它应该是这样的：
（如果只希望一个元素返回给用户querySelector（）
，则不需要循环）
函数loadImage（src，类名）{
var image=document.createElement（“img”）；
image.src=src；
image.onload=函数（）{
var tags=document.queryselectoral（“.”+className+a”）；
对于（var i=0；i
问题在于您使用的是querySelectorAll
，它返回的是节点列表而不是单个DOM节点。这意味着您必须迭代节点列表
，并将图像附加到其中的所有节点。为此，您可以为要插入图像的每个位置创建新副本，或者secloneNode
多次
var each=函数（xs，func）{
对于（变量i=0；i
在所有操作之前，您是否预先定义了类似于$resultsHtml=''；
的内容？我做了！$resultsHtml='"；
刚好在$count=0；
上面。我有一个几乎重复的PHP文件，做同样的事情，但它只是从数据库读取文本并将其输出到DOM-我只是在这个问题上遇到了麻烦，因为循环中有
元素！啊，好吧。如果这是一个JS问题，我不是这个问题的人。有一个答案iven，试一试。我现在就看一看-无论如何谢谢你！为了你的兴趣，我还编辑并附加了整个函数！哈哈，没关系。反正谁需要名声…实际上，它返回一个类似数组的对象，而不是数组。好吧，将querySelector all
更改为querySelector
解决了这个问题，现在是func我的印象是querySelector只针对页面上的第一个
，我没有考虑到类名给它一个唯一的标识符！谢谢你的回答！谢谢你的回答！这正是问题所在-我在过去的几个小时里因为我以为querySelector只是针对页面上的第一个
。。
function loadImage(src, className) {
var image = $("<img>");
image.on("load", function() {
$("." + className + " a").append(image);
});
image.on("error", function() {
});
image.attr("src", src);
}