從Ajax XML對象在DataList上動態設置圖像

Question

我正在從Ajax調用中檢索XML響應，並試圖從來自XML的圖像名稱的數據列表中設置圖像。這看起來有問題。 我想設置圖像的方法是這樣的：

$(".Image", tablex).attr('src', product.find("Image").attr('src')); 

然而，這似乎並沒有合適的工作，因爲在渲染的結果我看到第一排的第一個項目的圖像被複制/呈現在我的每個新增項目上。即使我設置像下面的屬性：

$(".Image", tablex).attr('123456'); 

結果與上面相同的，所以我相信attr內我的代碼沒有任何影響！ 如果我這樣設置代碼： $(".Image", tablex).html(product.find("Image").text());然後我可以看到正在頁面上呈現正確的文件名。

這裏是我的功能：

function OnSuccess(response) { 
     var xmlDoc = $.parseXML(response); 
     var xml = $(xmlDoc); 
     pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text()); 
     var customers = xml.find("Customers"); 
     customers.each(function() { 
      var product = $(this); 
      var tablex = $("#dvProducts div").eq(0).clone(true); 
      $(".Image", tablex).attr('src', product.find("Image").attr('src'));// <- Problem is here! 
      $(".ProductID", tablex).html(product.find("ProductID").text()); 
      $(".Name", tablex).html(product.find("Name").text()); 
      $("#dvProducts").append(tablex); 
     }); 
    } 

我的數據列表與新三項數據

<div id="dvProducts"> 
    <asp:DataList ID="rptCustomers" runat="server" BorderColor="Black" CellPadding="0" CellSpacing="0" RepeatLayout="Table" RepeatDirection="Horizontal" > 
     <ItemTemplate> 
      <div class="wrapping"> 
       <div id="boxer"> 
        <span class="Image"><asp:Image ID="Image" runat="server" CssClass="topimage" ImageUrl='<%# "~/images/topimages/" &Eval("Image")%>' /></span> 
        <br /> 
        <span class="ProductID"><asp:Label ID="ProductID" runat="server" Text='<%# Eval("ProductID") %>' /></span> 
        <br /> 
        <span class="Name"><asp:Label ID="Name" runat="server" Text='<%# Eval("Name")%>' /></span> 
       </div> 
      </div> 
      <br /> 
     </ItemTemplate> 
    </asp:DataList> 
</div> 

XML響應。

"<NewDataSet> 
    <Customers> 
    <RowNumber>4</RowNumber> 
    <SubCatName>Teenagers Phones</SubCatName> 
    <ProductID>6</ProductID> 
    <SubCategoryID>2</SubCategoryID> 
    <Name>HTC b</Name> 
    <Description>thcs</Description> 
    <Image>htc3.jpg</Image> 
    </Customers> 
    <Customers> 
    <RowNumber>5</RowNumber> 
    <SubCatName>Teenagers Phones</SubCatName> 
    <ProductID>5</ProductID> 
    <SubCategoryID>2</SubCategoryID> 
    <Name>HTC a</Name> 
    <Description>htca</Description> 
    <Image>htc2.jpg</Image> 
    </Customers> 
    <Customers> 
    <RowNumber>6</RowNumber> 
    <SubCatName>Teenagers Phones</SubCatName> 
    <ProductID>4</ProductID> 
    <SubCategoryID>2</SubCategoryID> 
    <Name>HTC</Name> 
    <Description>htc</Description> 
    <Image>htc1.png</Image> 
    </Customers> 
    <PageCount> 
    <PageCount>4</PageCount> 
    </PageCount></NewDataSet> " 

也許相對路徑的東西干擾，或者爲什麼我attr代碼並沒有得到拾起，我獲得每個新項目相同的圖像？有任何想法嗎？

Answer 1

您只在XML響應中獲得圖像名稱，因此您需要更新<span>中包含的<img>元素的src屬性。但是XML不包含完整路徑，所以您還需要預先指定圖像名稱的路徑。像這樣的東西應該工作：

//     find the img tag within the span 
//     |    set the src attribute of the image 
//     |    |  prepend the image path 
//     |    |  |      get the image name from the xml 
//     |    |  |      | 
$(".Image", tablex).find('img').attr('src', '/images/topimages/' + product.find("Image").text()); 

注意，「〜/圖片」在你的ASP代碼路徑是處理服務器端，並具有特殊的意義，而JavaScript是處理客戶端。在大多數情況下，上面的代碼應該可以工作，但ASP.NET允許您配置項目的「根」目錄，因此您可能需要修改我的示例以使其正常工作。