Question

我有4页“合并”到一个（index.html）加载：

<!-- !!!! Files includes !!!! -->
<script language="JavaScript" type="text/javascript"> 
$(function(){
$("#included1").load("aaa.html");
$("#included2").load("bbb.html");
$("#included3").load("ccc.html");
$("#included4").load("ddd.html");
});
</script>

并显示在这里：

<div id="content">
<section><br>
<div id="included1"></div>
</section>
<section><br>
<div id="included2"></div>
</section>
<section><br>
<div id="included3"></div>
</section>
<section><br>
<div id="included4"></div>
</section>
</div>  <!-- end of content // text below menu-->

不幸的是，由于某些服务器限制以及这4个页面是在不同时间由脚本生成的，因此必须以这种方式完成。

每个页面的内部代码都有许多块，其中有一些长文本要隐藏/显示在某些操作上。它看起来像这样：

<div class="error">
<div class="more">[... more]</div>
<div id="edetails" class="content small">
Error code///Error code///Error code///Error code///Error code///Error code///
Error code///Error code///Error code///Error code///Error code///Error code///
Error code///Error code///Error code///Error code///Error code///Error code///
</div>
</div><!-- end of error -->

为此我用这个：

<script type="text/javascript"> 
$(window).load(function(){
$('.more').click(function () {
    if($(this).html()=="[... more]") {  
            $(this).html("[... less]");
            $(this).next('#edetails').removeClass('small');
            $(this).next('#edetails').addClass('normal');
    } else {  
            $(this).html("[... more]");
            $(this).next('#edetails').removeClass('normal');
            $(this).next('#edetails').addClass('small');
        };
});
});
</script>

如果我在每个页面上保留该代码，并打开该页面（例如aaa.html，而不是index.html） - 它的工作正常。

如果我打开index.html - 它根本不起作用。

所以......由于这个事实，我把这个代码强了4次到index.html，我决定将它移动一次以索引并保持在<head> - 并且当我打开时我服务器上的那个页面 - show / hidde功能根本不起作用。

但是当我将index.html保存到我的硬盘驱动器并在浏览器中打开它时，它应该是这样的。

我不知道发生了什么......有什么想法吗？

Answer 1

这里棘手的部分是jQuery.load()是异步的。您需要同步调用才能在正确的时间运行脚本。我建议为此目的使用jQuery.Deferred：

$(document).ready(function() {
    function deferredLoad(target, url) {
        return $.Deferred(function(deferred) {
            $(target).load(url, function() {
                deferred.resolve();
            });
        }).promise();
    }

    var loadPromises = [];

    loadPromises.push(deferredLoad('#included1', 'aaa.html'));
    loadPromises.push(deferredLoad('#included2', 'bbb.html'));
    loadPromises.push(deferredLoad('#included3', 'ccc.html'));
    loadPromises.push(deferredLoad('#included4', 'ddd.html'));

    $.when.apply(null, loadPromises).done(function() {
        $('.more').click(function () {
            if($(this).html() == "[... more]") {  
                $(this).html("[... less]");
                $(this).next('#edetails').removeClass('small');
                $(this).next('#edetails').addClass('normal');
            } else {  
                $(this).html("[... more]");
                $(this).next('#edetails').removeClass('normal');
                $(this).next('#edetails').addClass('small');
            };
        });
    });
});

这样，当所有加载操作完成时，您的脚本将会运行。

jQuery脚本在.load（）之后无法正常工作

1 个答案: