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

Question

好的，所以我在Google Apps脚本驱动的Web应用程序中有一个脚本，其中我在Google Spreadsheet中有一组数据，如下所示：

然后在我的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进行样式设置。 因此状态中的所有内容都可以具有颜色：蓝色，类型中的所有内容都可以是红色，依此类推。

但是，如果我希望NEW和COMPLETED在同一列中有所区别，则我必须执行条件逻辑，如下所示：

 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>....)} 

然后，我只需在div处为状态新的和状态已完成的每个追加一个不同的类。 如果我也想在LARGE和SMALL以及ANSWERED和UNANSWERD之间进行相同的区分，那么这也可以“正常工作”，但是很快看起来很麻烦。 然后，我需要8种不同版本的IF语句吗？

所以我的问题是，有没有一种方法可以使一些条件逻辑在附加div之前用它们各自的类定义它们呢？ 所以首先我们看到状态是什么，好吧，它是新的，所以我将这是HTML，然后我们看到它的类型是Large，所以这是HTML，依此类推..等等，当处理完该行中的所有内容后，转到下一个。

我已经尝试了一些东西，但是我无法完全理解它在一个非常长的IF之外（如果IF THE IF THEN这样）之外的工作原理。

非常感谢所有帮助：）

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