速记与装载机.load（）AJAX链接 [英] shorthand for .load() ajax links with loader

问题描述

这里的code结构： http://jsfiddle.net/ss1ef7sq/ 尽管这不是真正的工作，在爵士小提琴，但code本身的工作，因为我已经通过Firefox的局部进行了测试。

here's the structure of the code: http://jsfiddle.net/ss1ef7sq/ although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.

这是我在基于此的JavaScript / lesson21.php

this is where i've based this on: http://html.net/tutorials/javascript/lesson21.php

jQuery的/ AJAX：

jquery/ajax:

$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
$('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
$('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
$('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
$('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});

所以我的问题是，有没有办法让它像一个较短的code，其中也可以只得到那些＃为10ns的价值或假设会有不同的网页与它自己的唯一ID巢无输入他们的个人？还是有很多我不与阿贾克斯这样理解我AP preciate，如果有人能帮助＆安培;说明至少它的要点为好。

so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help & explain at least the gist of it as well.

我已经看了看四周在线，但我真的很坚持。我还至少发现，它可能添加过渡，但它的方式是codeD存在，它只会有进入的页面和放大器的跃迁;不是一个将被替换。我也有网页装载机影响的概率，但我会保存它，当我卡在那里，以及对。

i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page & not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.

在此先感谢。 =）

推荐答案

使用类，而不是 ID 的。设置的href 属性，它要通过 $（本）.attr（HREF'）。

Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').

<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...

脚本：

$('.load-me').click(function(e){
    e.preventDefault();
    $('.main-container').hide().load($(this).attr('href'), function() {
        // ...
        $(this).fadeIn(800);
    })
});

的jsfiddle

如果您需要的负荷等容器中隐藏的动画，你可以把其他的方式。

If you need the load to wait container hiding animation, you could make it other way.

$('.load-me').click(function(e){
    e.preventDefault();
    // get the url from clicked anchor tag
    var url = $(this).attr('href');
    // fade out the container and wait for animation complete
    $('.main-container').fadeOut(200, /* animation complete callback: */ function(){
        // container is hidden, load content:
        $(this).load(url, /* load complete callback: */ function() {
            // content is loaded, show container up
            $(this).slideDown(200);
        });
    });
});

的jsfiddle

这篇关于速记与装载机.load（）AJAX链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！