shorthand for .load() ajax 与加载器链接

Question

代码结构如下：http://jsfiddle.net/ss1ef7sq/ 虽然它在 js fiddle 上并没有真正工作，但代码本身正在工作，因为我已经通过 firefox 在本地对其进行了测试。

这是我的依据：http://html.net/tutorials/javascript/lesson21.php

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);});

所以我的问题是，有没有办法让它像一个更短的代码，它可以只获取那些 #10ns 的值，或者假设会有一个不同的页面，它有自己的唯一 ID 嵌套而无需输入他们分别？ ajax 还有很多我不明白的地方，所以如果有人能提供帮助并至少解释一下要点，我将不胜感激。

我在网上四处看看，但我真的被困住了。我至少还发现可以添加过渡，但它的编码方式是它只会为传入页面提供过渡，而不是将要替换的页面。我也有一个页面加载器效果的问题，但我会把它保存起来，以备不时之需。

提前致谢。 =)

Answer 1

使用类而不是 id。设置要在单击时加载的 href 属性，并通过 $(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

如果需要load等待容器隐藏动画，可以用其他方式实现。

$('.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

shorthand for .load() ajax 与加载器链接

shorthand for .load() ajax links with loader

javascript

jquery

html

ajax

shorthand