0

我试图弄清楚如何从网络服务器加载图像，用于这个 JS 中的数组“logo”。不是一个大的 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

假设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 回答
1

在 json 对象属性中，logo 应该代表服务器上所需 logo 的 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 回答
0

您可以在徽标 html 中添加 img 元素

编辑 ：

我做得更好，就像 h2ooooooo 建议的那样：http: //jsfiddle.net/ddXYt/16/

于 2012-10-11T13:00:25.510 回答