2012-12-19 110 views
0

我必須添加一些li元素到ul列表。 每個li元素包含:使用jQuery添加一些li元素到ul

  • 一個錨

  • 一個img標籤

的問題是,該圖像不被顯示。

的jsfiddle:http://jsfiddle.net/michelejs/hxA9r/

function echoImages(json) { 
    alert(json); 
    var obj = $.parseJSON(json); 
    var html = ""; 
    $.each(obj, function() { 
     html += '<li id ="menu_travel-store" class="space ">' + '<a href="' + this['redirectURL'] + '">' + '<img src="' + this['imageURL'] + '" />' + this['description'] + '</a>' + '</li>'; 
    }); 
    alert(html); 
    $("#cityOffers").append(html); 
}​ 

我已經看到Chrome的添加這個CSS屬性:

display: none !important; 
visibility: hidden !important; 
opacity: 0 !important; 
background-position: 0px 0px; 

,但如果我用開發工具刪除圖像不仍然顯示。

什麼問題? 謝謝。

+1

圖像顯示給我。哪個瀏覽器? – CharliePrynn

+1

我也它的工作 –

+1

對於我以及:) – Morpheus

回答

0

您使用了錯誤的jQuery函數使用

$("#cityOffers").html(html);

,而不是

$("#cityOffers").append(html);

HTML()預計包含HTML代碼的字符串,而追加()期待一個DOM對象

+6

不,他沒有。這將覆蓋元素中的現有html。 – CharliePrynn

+0

從[docs](http://api.jquery.com/append/):「內容DOM元素,** HTML字符串**或jQuery對象插入到匹配元素集中每個元素的末尾。「 –

+0

我知道html()替換元素內部的代碼,但在這種情況下,我認爲替換內容是正確的,我確信append()需要一個DOM對象我的Chrome中我的不好 – wezzy

0

我在firefox中測試過它,它的工作原理。

我把你的代碼構建得更好一點。

http://jsfiddle.net/hxA9r/4/

function echoImages(json) { 
    alert(json); 
    var obj = $.parseJSON(json); 
    var html = ""; 
    $.each(obj, function() { 
     html += '<li id ="menu_travel-store" class="space ">' + '<a href="' + this.redirectURL + '">' + '<img src="' + this.imageURL + '" />' + this.description + '</a>' + '</li>'; 
    }); 
    alert(html); 
    $("#cityOffers").append(html); 
} 
$(document).ready(function() { 
    data = '[{"id":"1","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/1.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/1.png","title":"1","description":"1"},{"id":"3","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/3.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/3.png","title":"3","description":"3"},{"id":"6","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/9.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/9.png","title":"9","description":"9"},{"id":"2","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/2.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/2.png","title":"2","description":"2"},{"id":"5","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/5.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/5.png","title":"5","description":"5"},{"id":"4","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/4.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/4.png","title":"4","description":"4"}]'; 
    echoImages(data); 

});​ 

編輯:這聽起來像是從主機訪問圖像的問題。我已經在多個瀏覽器上進行了新舊測試,運行良好。

+0

我沒有看到任何圖片... img元素已添加,但我認爲它隱藏了...有什麼可能是錯的?謝謝 – michele

+0

你能訪問這個網址嗎?http://www.judopassion.com//affiliate//images//1.png – CharliePrynn

+0

是的,我可以...... – michele

2

解決了,問題是AdBlock Chrome擴展程序阻止圖像加載.....