0

このJSの配列「ロゴ」のWebサーバーから画像をロードする方法を見つけようとしています。大きな JS ウィザードではなく、これを解決できません。

スクリプトは、変更イベント「選択」を検出すると、表のセルに動的に入力し、それらを表の異なる列に書き込みます。画像をロードするだけで頭がいっぱいになります。

テーブルを含むコード全体はmyjsfiddleにあります

var data = {
"details":
    {
    "info": [
        {
        "name": "Prod1",
        "logo": "P1 Logo",
        "d1": "Specs of this",
        "d2": "Some Details",
        "d3": "More text about this",
        "d4": "Even more details here",
        "rating": "3 stars"
        },
    {
        "name": "Prod2",
        "logo": "P2 Logo",
        "d1": "Specs here",
        "d2": "Details go here",
        "d3": "wow, more text",
        "d4": "Even more text and details",
        "rating": "1 stars"
        },
    {
        "name": "Prod3",
        "logo": "P3 Logo",
        "d1": "Specs and stuff",
        "d2": "Details or some other things",
        "d3": "More details go here wow",
        "d4": "Almost forgot - more here",
        "rating": "5 stars"
        },
    {
        "name": "Prod4",
        "logo": "P4 Logo",
        "d1": "Specs, stuff etc",
        "d2": "Some other things",
        "d3": "What should I say",
        "d4": "details go here wow",
        "rating": "4 stars"
        }
    ]}
};

$(".select").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
    whichCol = "col2";
} else if
    (jthis.hasClass("col3")) {
    whichCol = "col3";
} else if
(jthis.hasClass("col4")) {
    whichCol = "col4";
}
$.each(data.details.info, function(i, v) {
    if (v.name == jthis.val()) {
        $("td." + whichCol + ".name").html(v.name);
        $("td." + whichCol + ".logo").html(v.logo);
        $("td." + whichCol + ".d1").html(v.d1);
        $("td." + whichCol + ".d2").html(v.d2);
        $("td." + whichCol + ".d3").html(v.d3);
        $("td." + whichCol + ".d4").html(v.d4);
        $("td." + whichCol + ".rating").html(v.rating);
        return;
    }
});

});
4

3 に答える 3

1

jsonオブジェクトでは、プロパティのロゴはサーバー上で必要なロゴへのURLを表す必要があります。URLがある場合は、単純なテキストの代わりにimgタグを追加するだけです。

例：

$.each(data.details.info, function(i, v) {
if (v.name == jthis.val()) {
    $("td." + whichCol + ".name").html(v.name);
    $("td." + whichCol + ".logo").html("<img src='" + v.logo + "' />");
    $("td." + whichCol + ".d1").html(v.d1);
    $("td." + whichCol + ".d2").html(v.d2);
    $("td." + whichCol + ".d3").html(v.d3);
    $("td." + whichCol + ".d4").html(v.d4);
    $("td." + whichCol + ".rating").html(v.rating);
    return;
}
});

ここでは、コードの編集バージョンを確認できます。

于 2012-10-11T13:03:19.193 に答える
1

v.logoが に等しいと仮定するとpath/to/logo.png、これは機能するはずです。

$.each(data.details.info, function(i, v) {
    if (v.name == jthis.val()) {
        $("td." + whichCol + ".name").html(v.name);
        $("td." + whichCol + ".logo").html('<img src="' + v.logo + '" alt="' + v.name + '" />');
        $("td." + whichCol + ".d1").html(v.d1);
        $("td." + whichCol + ".d2").html(v.d2);
        $("td." + whichCol + ".d3").html(v.d3);
        $("td." + whichCol + ".d4").html(v.d4);
        $("td." + whichCol + ".rating").html(v.rating);
        return;
    }
});
于 2012-10-11T12:49:24.850 に答える
0

ロゴのhtmlにimg要素を追加できます

編集 ：

私はh2oooooooが推測したようにそれをより良くしました：http：//jsfiddle.net/ddXYt/16/

于 2012-10-11T13:00:25.510 に答える