Question

这里是代码的结构：http://jsfiddle.net/ss1ef7sq/ 虽然它并没有真正适用于js小提琴但是代码本身正在运行，因为我已经通过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

.load（）的简写ajax与loader的链接

1 个答案: