Question

我有一个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);

    }

目前，我没有在前端获得任何结果。在页面源代码中，我可以看到每个锚标记内都有脚本标记，这些脚本标记显示了预加载了参数（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函数的实际工作方式，而不是盲目地依赖它们。

我们非常感谢您的帮助！

Answer 1

请注意，<div> <label for="input-file">Specify a file:</label><br> <input type="file" id="input-file"> </div> <textarea id="content-target"></textarea>返回一个类似数组的NodeList（https://developer.mozilla.org/en-US/docs/Web/API/NodeList），因此应该像这样：

（如果您只希望一个元素返回用户querySelectorAll()，则不需要循环）

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);
    }
  }
}

Answer 2

问题是您正在使用querySelectorAll，它返回NodeList而不是单个DOM节点。这意味着，您必须遍历NodeList并将图像附加到其中的所有节点。为此，您可以为要插入图像的每个位置创建新副本，也可以多次使用cloneNode。

var each = function (xs, func) {
  for (var i = 0; i < xs.length; i += 1) {
    func(xs[i]);
  }
  return xs;
}


var loadImage = function(src, className){

    var image = document.createElement("img");
    var aTag = document.querySelectorAll("." + className + " a");

    image.onload = function(){
      each(aTag, function (a) {
        a.appendChild(image.cloneNode());
      });
    };
    image.onerror = function(){};
    image.alt = '';
    image.src = src;

}



loadImage('http://www.fillmurray.com/500/300', 'wrap')

<div class="wrap">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

通过PHP循环，通过在每个循环上调用JavaScript函数，动态添加<img/>标签

2 个答案: