0

いくつかのli要素をulリストに追加する必要があります。各li要素には次のものが含まれます。

  • 1つのアンカー

  • 1つの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;

しかし、開発者ツールで削除しても、画像は表示されません。

何が問題ですか？ありがとう。

4

3 に答える 3

2

解決された問題は、画像の読み込みをブロックする AdBlock Chrome 拡張機能です.....

于 2012-12-19T11:58:55.903 に答える
0

間違ったjQuery関数を使用します

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

それ以外の

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

html（）はHTMLコードを含む文字列を期待し、append（）はdomオブジェクトを期待します

于 2012-12-19T11:44:01.123 に答える
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);

});​

編集:これは、ホストから画像にアクセスする際の問題のようです。新旧の複数のブラウザでテストしましたが、問題なく動作します。

于 2012-12-19T11:49:49.703 に答える