Question

我是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交换所需的图像，但这不起作用。任何见解或建议表示赞赏。感谢。

Answer 1

该行必须是：

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

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

Answer 2

数据绑定是执行此操作的最佳方式。像Angular，Knockout这样的框架提供了更简单的方法，其中我们只使用{{ result.JobName }}之类的特殊通配符编写html一次，并使用{{1}等语法在html上应用repeat }。如果你发现自己不得不做很多这样的事情，你必须阅读它们。

根据您的方法，您可以使用ternary operator。检查下面的代码，它被评估为：

repeat="result in results"

代码：

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

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

2 个答案: