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

我不熟悉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)
                }

var-seqIcon='img/BatchJobIcon.gif'；
var jobIcon='img/Logo32x32.gif'；
对于（变量i=0；i”+结果[i]。JobPath+''+结果[i]。JobStatus+''+结果[i]。JobType+”
'+
“”+
'' +
“
”+
'' +
'' +
'';
$（“#作业容器”）.append（divs）
}

我想使用类似line

（上面注释掉）的东西，以便能够根据JSON结果中的作业类型交换所需的图像，但这不起作用。如有任何见解或建议，我们将不胜感激。谢谢。

那一行必须是：

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

“”+

---

如果JobType变量等于1输出“img/BatchJobIcon.gif”，则转换为else输出jobIcon变量。

数据绑定是最好的方法。类似的框架提供了更简单的方法，在这些框架中，我们只使用特殊的通配符（如

{{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);
});

var-seqIcon='img/BatchJobIcon.gif'；
var jobIcon='img/Logo32x32.gif'；
var html，$container=$（'#jobContainer'）；
函数formHtml（行）{
返回“”+
'' +
'' +
'' +
'' +
''+row.JobName+''行+
“
”+row.JobPath+“”+row.JobStatus+“”+row.JobType+”
”'+
'' +
“
”+
'' +
'' +
'';
}
result.forEach（函数（行，i）{
html=formHtml（行）；
$container.append（html）；
});

为什么不在开始追加所有内容之前插入一条逻辑语句，确定正确的img HTML输出？不需要重写所有内容，只需使用三元运算符。我刚刚发布了答案：）@BuddhistBeast-你的解决方案也很有效。谢谢