我有一个 PHP 函数，它循环遍历数据库中的图像结果，用 HTML 格式化它们，然后将包含 HTML 布局的变量返回到我的 page.php。一切正常，但在循环中我有一些脚本标记调用我的 script.js 文件中的函数。它有两个参数(url 和 count)。我正在尝试将结果的 url 从数据库传递给函数，创建一个新的 img元素，并将传递的 url 附加到新创建的 img 标签的 src 属性。
到目前为止，这似乎有效 - 当我 console.log 结果时，我得到了 <img> 的负载标签，都附有相应的 src。
不过，我在实际将这些返回到前端时遇到了麻烦。
我下面的代码显示了 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;
}
var loadImage = function(src, className){
var image = document.createElement("img");
var aTag = document.querySelectorAll("." + className + " a");
image.onload = function(){
aTag.innerHTML = image;
};
image.onerror = function(){
};
image.setAttribute("src", src);
}
目前我在前端没有得到任何结果。在页面源代码中，我可以看到每个 anchor 标记内都有脚本标记，它们显示预加载了参数 ( 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);
}
我知道动态写<script>有一些麻烦带有 .innerHTML 的标签，但我不认为这是问题所在，因为脚本标记是在调用函数之前编写的。
我认为我以错误的顺序触发了一些东西，或者我遗漏了一些 jQuery 使用 .append 函数自动处理的东西。
我也试过aTag.appendChild(image); , 这也没有给出结果。
我已经使用 jQuery 几个月了，但我正在尝试彻底学习 Vanilla JS - 我正在尝试掌握 jQuery 函数的实际工作原理，而不是盲目地依赖它们。
非常感谢任何帮助!
最佳答案
注意 querySelectorAll() 返回一个类似数组的 NodeList ( https://developer.mozilla.org/en-US/docs/Web/API/NodeList )，所以它应该是这样的:
(如果你只想要一个元素返回用户querySelector()，那么你不需要循环)
function loadImage(src, className) {
var image = document.createElement("img");
image.src = src;
image.onload = function() {
var tags = document.querySelectorAll("." + className + " a");
for (var i = 0; i < tags.length; i++) {
tags[i].appendChild(image);
}
}
}<div class='grid-item image2'>
<a href='https://cdn.pixabay.com/photo/2015/08/21/21/55/star-wars-899693_960_720.jpg'>
<script>
document.addEventListener('DOMContentLoaded', function() { loadImage("https://cdn.pixabay.com/photo/2015/08/21/21/55/star-wars-899693_960_720.jpg", "image2");
});
</script>
<span class='details'>Star Wars 1</span>
</a>
</div>关于javascript - 通过在每个循环上调用 JavaScript 函数，通过 PHP 循环动态添加 <img> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54132930/