如何使用jQuery在页面加载后替换多个image类DIV的内容？

你的代码问题出在.ready()方法的使用方式和回调函数上下文错误上，以下是修正方案：

原代码的问题 #

1. .ready()方法不应直接绑定在.image元素集合上，它是监听整个DOM加载完成的事件，此时回调函数里的this指向document，而非单个.image元素，导致无法正确获取元素ID。
2. 错误的上下文使得$(this).attr('id')取不到目标元素的ID，进而load请求的URL无效。

修正后的代码 #

替换原脚本为以下内容：

<script>
$(document).ready(function() {
    // 遍历所有带image类的DIV
    $('.image').each(function() {
        var currentDiv = $(this);
        var divId = currentDiv.attr('id');
        // 加载对应ID的高清内容并替换当前DIV
        currentDiv.load('newimage.php?id=' + divId);
    });
});
</script>

代码说明 #

• $(document).ready()：确保所有DOM元素加载完成后再执行操作，避免操作尚未渲染的元素。
• .each()：遍历每个.image元素，此时回调函数里的this指向当前遍历的DIV，能正确获取其ID。
• currentDiv.load(...)：直接对当前DIV执行加载操作，无需通过ID选择器重复查找元素，效率更高。

可选优化（处理加载失败） #

如果需要处理加载失败的情况，可以添加回调函数：

<script>
$(document).ready(function() {
    $('.image').each(function() {
        var currentDiv = $(this);
        var divId = currentDiv.attr('id');
        currentDiv.load('newimage.php?id=' + divId, function(response, status) {
            if (status === 'error') {
                currentDiv.html('<p>图片加载失败，请稍后重试</p>');
            }
        });
    });
});
</script>

内容的提问来源于stack exchange，提问作者James