我的页面有一个链接列表,每个链接都使用 ajax 加载新页面。这些新页面包含一个图像库和一个主图像。我的目标是从主图像中获取源 URL,以在链接页面上的相应链接上显示为缩略图。
我不知道该怎么做。如果有人能指出我正确的方向,也许给我一些代码可以遵循,我将不胜感激。
我的页面有一个链接列表,每个链接都使用 ajax 加载新页面。这些新页面包含一个图像库和一个主图像。我的目标是从主图像中获取源 URL,以在链接页面上的相应链接上显示为缩略图。
我不知道该怎么做。如果有人能指出我正确的方向,也许给我一些代码可以遵循,我将不胜感激。
您可以使用 jQuery.get 加载外部页面。
$.get('my_external_page.html', function(data) {
// data is the pages contents.
});
然后把它塞进一个div
$.get('my_external_page.html', function(data) {
// data is the pages contents.
var haystack = $('<div>').html(data);
var needle = haystack.find('.image-we-want');
var imageSrc = needle.attr('src');
});
这是一个开始。当然,它假定您可以使用 jquery,并且您要搜索的元素具有类或 ID。
得到它的工作。可能不是最聪明的方法,但它确实有效。
我有一个充满链接的页面()。我在被调用的底部也有一个空的 div。代码将图标加载到这些链接。链接指向包含多个图像的新页面。这些图标是页面标准图像的缩小版本。
function iconPicHandler(){
var aTags = $('#linkpage a');
for(var i = 0; i < aTags.length; i++){
$('#invisible').load('page3.html #standardImage',function(aLink){
return function(){
$('<img src="'+ $('#standardImage').attr("href") +'" />')
.prependTo(aLink);
}
}
($(atags[i])));
}
$('#invisible').hide();
}
所以我做的第一件事就是获取链接页面中的所有链接。我将其余代码放入 for 循环中,因此我可以对所有链接执行相同操作。然后我将“#standardImage”从 page3.html 加载到“#invisible”中。#standardImage" 是一个空 div,其中包含一个指向 page3 的标准图像的缩小版本的 url。该 url 被保存为 div 的 href 属性。然后是棘手的部分。我不确定我在这里做了什么。但作为一个回调函数,我做了一个函数,它接受一个参数,在末尾指定($(atags [i]))。这个函数然后返回一个新函数!这使我能够访问 atags(链接)和新加载的$('#standardImage')。在函数内部,我从 $('#standardImage') 中提取 href 并将其用作附加到链接的图像的 src。
如前所述,这不是一种非常聪明的方法,但它可以完成工作。谁知道呢,也许它可以帮助下一个碰巧遇到类似问题的初学者。