.load () Используйте не применить к каждому объекту
-
27-10-2019 - |
Вопрос
Я пытаюсь загрузить контент с под страницы, а затем добавляю атрибут REL для галереи, необходимой для подключения PrettyPhoto. После того, как сценарий запускается, REL был добавлен только к последнему набору изображений.
HTML
<div class="prettyphotothumb">
<ul class="navsub">
<li><a href="album.html"><img src="images/thumbnail.jpg" alt="" />Album</a></li>
<li><a href="blarg.html"><img src="images/thumbnail.jpg" alt="" />Blarg</a></li>
<li><a href="test.html"><img src="images/thumbnail.jpg" alt="" />Test</a></li>
</ul>
</div>
JS
if($('div.prettyphotothumb').length > 0) {
$('div.prettyphotothumb a').each(function() {
var pageLink = $(this);
var albumTitle = $(pageLink).text();
var album = $('<div class="album"></div>').appendTo( $(pageLink).parent());
$('.album').load(this.href+' .prettyphotoalbum p > *',null,function(){
album.children('a').attr('rel','prettyPhoto['+albumTitle+']');
});
$('a[rel^="prettyPhoto"]').live("click",function() {
$.prettyPhoto.open($(this).attr("href"),"","");
return false;
});
});
}
Решение
Как вы итерации с помощью each
, вы добавляете <div class="album">
На каждой итерации:
var album = $('<div class="album"></div>').appendTo( $(pageLink).parent());
А затем прямо ниже:
$('.album').load(//...
На первой итерации, $('.album').length
будет один, во втором это будет два и т. Д. Последняя итерация в конечном итоге будет вызовет .load('test.html .prettyphotoalbum p > *', ...
На всех трех <div class="album">
Элементы, которые вы добавили.
Я думаю, вы хотите просто связать load
к тому, что вы только что создали:
// Use album rather than $('.album')
album.load(this.href+' .prettyphotoalbum p > *',null,function(){
album.children('a').attr('rel','prettyPhoto['+albumTitle+']');
});
Кроме того, вам нужен только один .live
Позвоните, так что переместите это:
$('a[rel^="prettyPhoto"]').live("click",function() {
$.prettyPhoto.open($(this).attr("href"),"","");
return false;
});
вне .each
. Анкет Так что что -то подобное должно работать лучше:
if($('div.prettyphotothumb').length > 0) {
$('div.prettyphotothumb a').each(function() {
var pageLink = $(this);
var albumTitle = $(pageLink).text();
var album = $('<div class="album"></div>').appendTo($(pageLink).parent());
album.load(this.href+' .prettyphotoalbum p > *', null, function() {
album.children('a').attr('rel', 'prettyPhoto[' + albumTitle + ']');
});
});
$('a[rel^="prettyPhoto"]').live("click", function() {
$.prettyPhoto.open($(this).attr("href"), "", "");
return false;
});
}