Question

首先，我是一个jquery新手;第二，我需要根据以下代码保持这个简单，除非你注意到我错过的错误。稍后可以采用更复杂的方法。以下函数旨在将四个隐藏DIV（现在可见）的URL查询内容复制到中央内容DIV中。这种方法是绕过最大值的必要条件。在Blogger网站上为URL查询返回的17条记录/帖子。

function loadContent(targetElement, sourceURL, sourceElement) {
var mytarget = $(targetElement); // cache the initial
mytarget.hide().empty();
$("body").scrollTop(0);
$("#tempElement1").load("http://www.ndauthorservices.com" + sourceURL + "&by-date=true .post-start.row");
$("#tempElement2").load("http://www.ndauthorservices.com" + sourceURL + "&start=17&by-date=true .post-start.row");
$("#tempElement3").load("http://www.ndauthorservices.com" + sourceURL + "&start=34&by-date=true .post-start.row");
$("#tempElement4").load("http://www.ndauthorservices.com" + sourceURL + "&start=51&by-date=true .post-start.row");

mytarget.append($("#tempElement1").html());
mytarget.append($("#tempElement2").html());
mytarget.append($("#tempElement3").html());
mytarget.append($("#tempElement4").html());

}

可以在此处查看页面代码：https://docs.google.com/a/nobledead.org/uc?id=0Bzd09tGp2OU8YUV0VWZpN0JhNFU&export=download

可在此处查看实时测试页：http://www.ndauthorservices.com/p/gallerytestjc.html

Answer 1

您（将会）遇到上述代码的问题，因为您要附加隐藏div的内容，而不检查load()操作是否已完成。因为它可能没有（append正好在load次调用之下），结果就是＆＃34; mytarget＆＃34;元素将始终为空，因为隐藏元素最初为空：

<div id="tempElement1"></div>
<div id="tempElement2"></div>
<div id="tempElement3"></div>
<div id="tempElement4"></div>

这个问题的一个快速解决方案是：

创建一个变量来跟踪已完成的负载数量（例如：loadedDivs）。
```
var loadedDivs = 0;
```

添加在每个load之后执行的函数：

$("#tempElement1").load("http://www.ndauthorservices.com" + sourceURL + "&by-date=true .post-start.row", allLoaded);
$("#tempElement2").load("http://www.ndauthorservices.com" + sourceURL + "&start=17&by-date=true .post-start.row", allLoaded);
$("#tempElement3").load("http://www.ndauthorservices.com" + sourceURL + "&start=34&by-date=true .post-start.row", allLoaded);
$("#tempElement4").load("http://www.ndauthorservices.com" + sourceURL + "&start=51&by-date=true .post-start.row", allLoaded);

创建allLoaded()函数，并在其中：

将loadedDivs的值增加1。
如果loadedDivs的值与您调用的load的数量相同，则执行追加（所有加载都已成功完成）。

在这种情况下，它看起来像这样：

function allLoaded() {
    loadedDivs++;
    if (loadedDivs == 4) {
        mytarget.append($("#tempElement1").html());
        mytarget.append($("#tempElement2").html());
        mytarget.append($("#tempElement3").html());
        mytarget.append($("#tempElement4").html());
    }
}

那应该是它。您正在正确执行追加，唯一的问题是您提前运行它。结果在您的代码中看起来像这样（滚动查看load的最后一部分）：

var loadedDivs = 0;
var loadElement = null;

function allLoaded() {
    loadedDivs++;
    if (loadedDivs == 4) {
        loadElement.append($("#tempElement1").html());
        loadElement.append($("#tempElement2").html());
        loadElement.append($("#tempElement3").html());
        loadElement.append($("#tempElement4").html());
    }
}

function loadContent(targetElement, sourceURL, sourceElement) {
    var mytarget = $(targetElement); // cache the initial
    loadElement = mytarget;
    mytarget.hide().empty();
    $("body").scrollTop(0);
    $("#tempElement1").load("http://www.ndauthorservices.com" + sourceURL + "&by-date=true .post-start.row", allLoaded);
    $("#tempElement2").load("http://www.ndauthorservices.com" + sourceURL + "&start=17&by-date=true .post-start.row", allLoaded);
    $("#tempElement3").load("http://www.ndauthorservices.com" + sourceURL + "&start=34&by-date=true .post-start.row", allLoaded);
    $("#tempElement4").load("http://www.ndauthorservices.com" + sourceURL + "&start=51&by-date=true .post-start.row", allLoaded);

    Shadowbox.setup("a.coverpreview", {      
        viewportPadding: 40
    });
}

jQuery将隐藏元素的内容附加到可见元素

1 个答案: