更好的方法是在附加HTML时执行IF语句的多个实例？

Question

好的，我在Google脚本驱动的Web应用程序中有一个脚本，在Google电子表格中有一组数据，如下所示：

​

​

在我的code.gs中，我定义我的电子表格并获取所有的值，然后迭代它们并创建变量，然后作为JSON返回这些变量，如下所示：

function getOrders(){
 var ordersName = [];
 var subRange = sheet.getRange(2, 1, sheet.getLastRow(),sheet.getLastColumn());
 var orders = subRange.getValues();

 for (var i = 0; i < orders.length; i++) {
    ordersName.push( { 
       status: orders[i][0], 
       type: orders[i][1],
       answer: orders[i][2]
   } );
  }
  return JSON.stringify(ordersName);
}

在前面的code.gs中，我也有一个HTMLservice，它从文件page.html创建一个HTML页面。

我从我的page.html运行函数，如下所示：

$(function() {
  google.script.run.withSuccessHandler(buildOrderList).getOrders();
});

function buildOrderList(ordersName) {
  var arr = JSON.parse(ordersName);
  var rows = $('#orders');
  for (var i = 0; i < arr.length; i++) {

    rows.append('<div class="status">' + arr[i].status + '</div><div class="type">' + arr[i].type + '</div><div class="answer">' + arr[i].status + '</div>) 

然后将该JSON解析到我的函数buildOrderList中，然后使用append在带有ID "orders“的HTML中显示daya，这一切都很好。然后，我可以做的是根据它们的类在附件中创建各种div的样式。所以状态中的任何东西都可以有颜色:蓝色，类型上的所有东西都可以是红色等等。

但是，如果我希望在同一列中有新的和完成的区别，我就必须执行条件逻辑，如下所示：

 if(arr[i].status === "NEW"){
 rows.append('<div class="status-new">' + arr[i].status + '</div>....)} 

 if(arr[i].status === "COMPLETED"){
 rows.append('<div class="status-completed">' + arr[i].status + '</div>....)} 

然后，我只需为每个已完成的状态和状态添加一个不同的类。这也很“管用”，但很快就显得相当麻烦，如果我也想把大大小小的区别与UNANSWERD作同样的区分的话。那么，我需要8个不同版本的IF语句？

那么，我的问题是，是否有一种方法可以在每个div被追加之前，用它们各自的类来定义它们的条件逻辑？首先我们看到状态是什么，好的，这是新的，所以这是HTML，然后我们看到它的类型，它很大，所以这个HTML，等等。当你完成了这一行中的每一件事后，你就会转到下一排。

我试过一些东西，但我无法完全理解它在极长的时间外是如何工作的，如果是这样的话。

我们非常感谢所有的帮助:)

Answer 1

创建一个具有所有可能性的对象：

var objStatusToClass = {
  'NEW':"status-new",
  "COMPLETED":"status-completed",
  'LARGE':'className',
  'SMALL':'className'
};

var thisStatus,
    classToUse,
    html = "";

for (var i = 0; i < arr.length; i++) {
  thisStatus = arr[i].status;
  classToUse = objStatusToClass[thisStatus];//Lookup class to use

  html = html + '<div class="' + classToUse + '">' + arr[i].status + '</div>....)
};

return html;

html是一个字符串，将作为字符串在客户端函数中接收。您使用的是.withSuccessHandler(buildOrderList)，因此返回将由buildOrderList函数接收。您可以在一个命令中追加整个HTML。

function buildOrderList(ordersHTML) {

  document.getElementById('orders').innerHTML = ordersHTML;

如果要在现有HTML中添加HTML而不从该元素中删除现有HTML，则可以使用：

document.getElementById('orders').insertAdjacentHTML('beforeend', ordersHTML);

//'beforeend' - Just inside the element, after its last child