根据JSON结果有条件地更改显示图像

Conditionally change display image based on JSON results

本文关键字：显示 显示图 图像 JSON 结果 有条件 根据      更新时间：2023-09-26

我是javascript和jQuery的新手，我试图在浏览器中显示JSON结果。我试图创建动态HTML，同时插入JSON结果。以下是JSON数据的示例:

[{"JobName":"JobDoSomething","JobStatus":2,"JobStatusString":"","JobPath":"''Mart''ControlCenter''","JobType":1},
{"JobName":"JobDoSomething2","JobStatus":2,"JobStatusString":"","JobPath":"''Mart''ControlCenter''","JobType":1},
{"JobName":"JobDoSomething3","JobStatus":4,"JobStatusString":"","JobPath":"''Mart''ControlCenter''","JobType":0}

下面是我用来显示结果的代码:

var seqIcon = 'img/BatchJobIcon.gif';
var jobIcon = 'img/Logo32x32.gif';
for(var i = 0; i < result.length; i++){
                    divs[parseInt(divs.length) - 1].innerHTML += '<div id="' + result[i].JobName + '" class="outerDiv">' +
                        '<div class="middleDiv">' +
                            '<div class="innerDiv">' +
                                '<img  id="image" src=' + jobIcon + ' />' +
                                /* '<img id="image" src=' + 'if (' + result[i].JobType + '= 1) {' + "img/BatchJobIcon.gif" + '} else {' + jobIcon + '};' + '/>' + */
                                '<h3>' + result[i].JobName + '</h3>' +
                                    '<p class="JobPath">' + result[i].JobPath + ' ' + result[i].JobStatus + ' ' + result[i].JobType + '</p>' + 
                                    '<p> <input type="button" id="btnRunJob" class="btn-minimal" value="Run Job" />' +
                                    '<input type="button" id="btnGetLog" class="btn-minimal" value="Job Log" />' +
                                    '</p>' +
                              '</div>' +
                        '</div>' +
                        '</div>';
                    $('#jobContainer').append(divs)
                }

我想使用类似<img id="image" src=' + 'if (' + result[i].JobType + '= 1) {' + "img/BatchJobIcon.gif" + '} else {' + jobIcon + '};' + '/>行(上面注释掉了)的东西，以便能够根据JSON结果的JobType交换所需的图像，但这不起作用。任何见解或建议都是赞赏的。谢谢。

这一行必须是:

'<img id="image" src=' + (result[i].JobType == 1 ? "img/BatchJobIcon.gif" : jobIcon) + '/>' +

这意味着，如果JobType变量等于1，输出"img/BatchJobIcon.gif"，否则输出jobIcon变量。

数据绑定是最好的方法。像Angular、Knockout这样的框架提供了更简单的方法，在这些框架中，我们只需要用{{ result.JobName }}这样的特殊通配符写一次html，然后用repeat="result in results"这样的语法在html上应用repeat。如果你发现自己不得不做很多这样的事情，你必须仔细阅读它们。

按照您的方法，可以使用三元操作符。检查下面的代码，它被计算为:

+
if (row.JobType == 1) {
    "img/BatchJobIcon.gif"
} else {
    jobIcon
}
+

代码:

var seqIcon = 'img/BatchJobIcon.gif';
var jobIcon = 'img/Logo32x32.gif';
var html, $container = $('#jobContainer');
function formHtml(row) {
    return '<div id="' + row.JobName + '" class="outerDiv">' +
                    '<div class="middleDiv">' +
                        '<div class="innerDiv">' +
                            '<img  id="image" src=' + jobIcon + ' />' +
                            '<img id="image" src=' + (row.JobType == 1 ? "img/BatchJobIcon.gif" : jobIcon) + '/>' +
                            '<h3>' + row.JobName + '</h3>' +
                            '<p class="JobPath">' + row.JobPath + ' ' + row.JobStatus + ' ' + row.JobType + '</p>'                                    '<p> <input type="button" id="btnRunJob" class="btn-minimal" value="Run Job" />' +
                            '<input type="button" id="btnGetLog" class="btn-minimal" value="Job Log" />' +
                            '</p>' +
                      '</div>' +
                '</div>' +
           '</div>';
}
result.forEach(function (row, i) {
    html = formHtml(row);
    $container.append(html);
});
相关文章：