jQuery - 可以使用一个内容加载器的一点帮助

问题描述

在JavaScript方面，我并不是非常精英，尤其是语法。所以我想学习。在这个过程中，我试图实现一个内容加载器，它基本上从div中删除所有内容，并从另一个文档的另一个div中插入内容。

我试图在这个网站上做到这一点：$ b​​ $ b www.matkalenderen.no - 检查那里的对接丑陋链接。看看会发生什么？

我从这个网站上看到了这个例子：

但我不确定这个例子是否按照我认为的方式工作。我的意思是，如果代码只是从div中删除现有内容并插入另一个div的内容，为什么本示例中的其他网页包含文档类型和标题等等？你不是只需要div，它的内容？没有所有其他的东西周围？也许我不明白这是如何工作的。认为它像真的包括真正的工作。

然而，这是我的代码：

  $（document）。 ready（function（）{
 
 var hash = window.location.hash.substr（1）; 
 var href = $（'＃dynloader a'）。each（function（）{ 
变种HREF = $（本）.attr（ 'href' 属性）; 
如果（散列== href.substr（0，href.length-5））{
的对负载VAR =散列+ '.html #container'; 
 $（'＃container'）。load（toLoad）
} 
}）; 
 
 $（'＃dynloader a' ）.click（function（）{
 
 var toLoad = $（this）.attr（'href'）+'#container'; 
 $（'＃container'）。hide 'fast'，loadcontainer）; 
 $（'＃load'）。remove（）; 
 $（'＃wrapper'）。append（'< span id =load> LOADING。 ..< / span>'）; 
 $（'＃load'）。fadeIn（'normal'）; 
 window.locat （），$（this）.attr（'href'）。substr（0，$（this）.attr（'href'）。length-5）; 
功能loadcontainer（）{
 $（ '＃容器'）。负荷（对负载， ''，showNewcontainer（））
} 
功能showNewcontainer（）{
 $（ '＃容器'）显示（ '正常的'，hideLoader（））; 
} 
函数hideLoader（）{
 $（'＃load'）。fadeOut（'normal'）; 
} 
返回false; 
 
}）; 
 
}）; 
  

解决方案

jQuery .load ）中有一些额外的功能来支持此功能。

在你的例子中，重要的部分是： $ b hash +'。html #container' #container 之前的空格表示jQuery将抓取该URL，使用<$ c $查找元素c> id =container并只提取该元素的内容，丢弃页面的其余部分。这可以让 .load（）以更通用的方式工作，而不需要专门为ajax加载而设计。

在你的情况下，我认为你只需要从最后删除 #content ，除非你正在寻找那个元素。这并不是说寻找内容，这只是他们用于寻找元素的ID。它可能是 #divToLoad 这将是一个更清晰的例子IMO。

I'm not very elite when it comes to JavaScript, especially the syntax. So I'm trying to learn. And in this process I'm trying to implement a content loader that basically removes all content from a div and inserts content from another div from a different document.

I've tried to do this on this site:www.matkalenderen.no - Check the butt ugly link there. See what happens?

I've taken the example from this site:http://nettuts.s3.cdn.plus.org/011_jQuerySite/sample/index.html#index

But I'm not sure this example actually works the way I think it does. I mean, if the code just wipes out existing content from a div and inserts content from another div, why does the other webpages in this example include doctype and heading etc etc? Wouldn't you just need the div and it's content? Without all the other stuff "around"? Maybe I don't get how this works though. Thought it worked mosly like include really.

This is my code however:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#dynloader a').each(function(){
            var href = $(this).attr('href');
            if(hash==href.substr(0,href.length-5)){
                    var toLoad = hash+'.html #container';
                    $('#container').load(toLoad)
            }                                                                                        
    });

    $('#dynloader a').click(function(){

            var toLoad = $(this).attr('href')+' #container';
            $('#container').hide('fast',loadcontainer);
            $('#load').remove();
            $('#wrapper').append('<span id="load">LOADING...</span>');
            $('#load').fadeIn('normal');
            window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
            function loadcontainer() {
                    $('#container').load(toLoad,'',showNewcontainer())
            }
            function showNewcontainer() {
                    $('#container').show('normal',hideLoader());
            }
            function hideLoader() {
                    $('#load').fadeOut('normal');
            }
            return false;

    });

});

解决方案

The jQuery .load() has some extra functionality in it to support this.
You can see it in the docs here (look at `Loading Page Fragments')

In your example here's the important part: hash+'.html #container' the space before the #container means that jQuery will grab that URL, look for the element with id="container" and fetch only that element's content's discarding the rest of the page. This lets .load() work in a more generic way without what you're fetching being specifically designed for only ajax loading.

In your case I think you just need to remove #content from the end unless you're looking for that element. It's not saying "look for content" that's just the ID they used for the element they wanted to look for. It could have been #divToLoad which would be a clearer example IMO.

这篇关于jQuery - 可以使用一个内容加载器的一点帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！