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