JQuery 在页面加载时替换多个 div 内容

Question

我有一系列从 PHP 循环创建的 DIV，每个都有相同的 class（“图像”），它们是用一个小的占位符图像生成的，以加速初始页面加载。 但是，一旦页面加载完成，我想用另一个页面返回的内容替换每个 div 内容。 这个其他页面将呈现更高质量的图像，每个 DIV 都是唯一的，以及一些关于图像的相关元数据。 从本质上讲，这将是一种延迟加载。

在 PHP 循环之后，我的 HTML 代码如下所示：

<div id='content'>
    <h1>Some title goes here</h1>
    <div id='home'>
        <div class='image' id='aaa'><img src='/placeholder.jpg'/></div>
        <div class='image' id='bbb'><img src='/placeholder.jpg'/></div>
        <div class='image' id='ccc'><img src='/placeholder.jpg'/></div>
        <div class='image' id='ddd'><img src='/placeholder.jpg'/></div>
        <div class='image' id='eee'><img src='/placeholder.jpg'/></div>
        <div class='image' id='fff'><img src='/placeholder.jpg'/></div>
    </div>    
</div>

我是 JQuery 的新手，我希望做类似下面的事情，然后用 class“图像”替换每个 DIV 的内容。 本质上，想法是从带有 class 'image' 的 DIV 中获取 id 值，将其解析为 newimage.php 脚本，然后从 newimage.php 返回的 HTML 替换 DIV 内容。

<script>
    var updateDivs = function(){
        var objid = $(this).attr('id');
        $("#"+objid).load("newimage.php?id="+objid);
    }
    $('.image').ready(updateDivs);
</script>

这样在运行 JQuery 之后，HTML 代码将如下所示：

<div id='content'>
    <h1>Some title goes here</h1>
    <div id='home'>
        <div class='image' id='aaa'><span class='image-title>Image Title 1</span><span class='image-views'>10</span><img src='/img/aaa.jpg'/></div>
        <div class='image' id='bbb'><span class='image-title>Image Title 2</span><span class='image-views'>11</span><img src='/img/bbb.jpg'/></div>
        <div class='image' id='ccc'><span class='image-title>Image Title 3</span><span class='image-views'>9</span><img src='/img/ccc.jpg'/></div>
        <div class='image' id='ddd'><span class='image-title>Image Title 4</span><span class='image-views'>8</span><img src='/img/ddd.jpg'/></div>
        <div class='image' id='eee'><span class='image-title>Image Title 5</span><span class='image-views'>12</span><img src='/img/eee.jpg'/></div>
        <div class='image' id='fff'><span class='image-title>Image Title 6</span><span class='image-views'>14</span><img src='/img/fff.jpg'/></div>
    </div>    
</div>

但是，在 JQuery 代码中尝试了一些变体后，我无法让它按预期工作。 任何帮助将不胜感激！

Answer 1

您的问题是$(".image").ready(.. - 快速调试显示 function 中的this是document ，而不是图像。.ready .ready()无法以这种方式工作。

。准备好（）

https://api.jquery.com/ready/

指定一个 function 在 DOM 完全加载时执行。

上面的页面显示了$("img").ready(handler)并声明这等同于$(handler) 。 所以.ready可以称为.documentIsReady 。

似乎不需要等待您的占位符加载，因此您只需调用普通的 doc.ready，传入每个图像：

$(() => $('.image').each(updateDivs);

或者，如果您愿意：

$(function() {
   $(".image").each(updateDivs)
});