javascript - 如何在此脚本中从JSON数组加载图像？

我试图弄清楚如何从Web服务器为该JS中的数组“徽标”加载图像。这不是一个大型的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;
    }
});

});

最佳答案

在json对象中，属性徽标应代表服务器上所需徽标的网址。如果您有网址，则可以简单地添加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;
}
});

Here您可以看到代码的编辑版本。