shorthand for .load() ajax links with loader

问题

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.

this is where i've based this on: 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);});

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.

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.

thanks in advance. =)

回答1:

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>
...

Script:

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

来源：https://stackoverflow.com/questions/28383142/shorthand-for-load-ajax-links-with-loader

标签

javascript

jquery

html

ajax

shorthand