Сокращение для.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 или предположить, что будет другая страница с собственным гнездом уникальных идентификаторов без индивидуального ввода их? с ajax еще многое я не понимаю, поэтому я был бы признателен, если бы кто-нибудь смог помочь и объяснить хотя бы суть этого.

Я смотрел в Интернете, но я действительно застрял. я также, по крайней мере, узнал, что можно добавлять переходы, но способ его кодирования заключается в том, что он будет иметь только переход для входящей страницы, а не тот, который будет заменен. У меня также есть пробник с эффектами загрузчиков страниц, но я сохраню его, когда застряну там.

заранее спасибо. знак равно

Answer 1

Используйте классы вместо id"S. Задавать 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