Сокращение для .load() ajax links with loader

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