從外部頁面的元素中加載一個屬性

Question

我的頁面有一個鏈接列表，每個鏈接用ajax加載新頁面。這些新頁面包含一個圖像庫和一個主要圖像。 我的目標是從主圖像中獲取源URL，將其顯示爲鏈接頁面上相應鏈接上的縮略圖。

我不知道如何去做這件事。如果有人能指出我正確的方向，也許給我一些代碼，我會很感激。

Answer 1

您可以使用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。

Answer 2

得到它的工作。可能不是最明智的做法，但它的工作原理。

我有一頁充滿鏈接（）。我在被調用的底部也有一個空的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(); 
} 

所以我做的第一件事就是獲取linkpage中的所有鏈接。我把剩下的代碼放到一個for循環中，所以我可以對所有的鏈接做同樣的事情。 然後，我將「＃標準圖像」從page3.html加載到「#invisible」中。 #standardImage「是一個空白的div，其中包含一個page3的standardImage縮小版本的url，url保存爲div的href屬性 然後來了棘手的部分，我不確定我在這裏做了什麼，但作爲一個回調函數我做了一個函數，它有一個參數，它在末尾指定（$（atags [i]））。這個函數然後返回一個新的函數！這使我能夠訪問atags（鏈接）和新的加載$（'＃standardImage'）。 在函數內部，我從$（'＃standardImage'）中提取href，並將它用作鏈接前置圖像的src。 最後，在for循環之外，我隱藏$（'＃隱形'）

如前所述，這不是一個非常聰明的做法，但它可以完成工作。誰知道，也許它可以幫助下一個初學者步行誰碰巧碰到類似的問題。