Question

好的，我在Google Apps脚本驱动的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 早些时候我还有一个HTML服务，从文件 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在HTML元素中显示daya，ID为“orders”，所有这些都可以正常工作。然后我可以做的是根据他们的类来设置我在追加中创建的各种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，然后我们看到它的类型是大的所以这个HTML，等等...当完成该行中的所有内容时，你继续前进到下一个。

我已经尝试了一些东西，但我不能完全理解它如何工作在极长的IF之外如果这样的话。

非常感谢所有帮助：）

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

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

1 个答案: