Question

以下是if语句，它在检查某些条件之前执行了代码的一部分，它可以正常工作，但是看起来很基础，并且重复了几行。

    if(allTasks[t].status === "Completed"){
        arrow.setAttribute("class","arrow2");
        tag.setAttribute("class","completed");
        tag.innerHTML = allTasks[t].status;
        taskCont.appendChild(tag);
    }else if(allTasks[t].status === "Past Due"){
        arrow.setAttribute("class","arrow2");
        tag.setAttribute("class","pastdue");
        tag.innerHTML = allTasks[t].status;
        taskCont.appendChild(tag);
    }else if(allTasks[t].status === "Duetoday"){
        arrow.setAttribute("class","arrow2");
        tag.setAttribute("class","duetoday");
        tag.innerHTML = allTasks[t].status;
        taskCont.appendChild(tag);
    }else if(allTasks[t].status === "Onhold"){
        arrow.setAttribute("class","arrow2");
        tag.setAttribute("class","onhold");
        tag.innerHTML = allTasks[t].status;
        taskCont.appendChild(tag);
    }else if(allTasks[t].status === "Canceled"){
        arrow.setAttribute("class","arrow2");
        tag.setAttribute("class","canceled");
        tag.innerHTML = allTasks[t].status;
        taskCont.appendChild(tag);
    }

Answer 1

尝试下面的代码，这将保存您的if语句

var status = allTasks[t].status;
arrow.setAttribute("class","arrow2");
tag.setAttribute("class",status.replace(/ /g,'').toLowerCase());
tag.innerHTML = status;
taskCont.appendChild(tag);

Answer 2

您可以使用switch语句。

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

您还应该从条件中删除重复的代码，如下所示：


arrow.setAttribute("class","arrow2");
tag.innerHTML = allTasks[t].status;
taskCont.appendChild(tag);

switch (allTasks[t].status) {
  case "Completed":
    tag.setAttribute("class","completed");
    break;
  case "Past Due":
    tag.setAttribute("class","pastdue");
    break;
  case "Duetoday":
    tag.setAttribute("class","duetoday");
    break;
  case "Onhold":
    tag.setAttribute("class","onhold");
    break;
  case "Canceled":
    tag.setAttribute("class","canceled");
    break;
}

Answer 3

var statusList={
    'Completed':{
        'arrowClass':'arrow2',
        'tagClass':'completed'
    },
    'Past Due':{
        'arrowClass':'arrow2',
        'tagClass':'pastdue'
    }
}

使用这种结构，您可以执行以下操作：

arrow.setAttribute("class",statusList[allTasks[t].status]["arrowClass"]);
tag.setAttribute("class",statusList[allTasks[t].status]["tagClass"]);
tag.innerHTML = allTasks[t].status;

Answer 4

1）您可以将重复的句子排除在“如果”之外：

arrow.setAttribute("class","arrow2");
tag.innerHTML = allTasks[t].status;
taskCont.appendChild(tag);
if(allTasks[t].status === "Completed"){

    tag.setAttribute("class","completed");

}else if(allTasks[t].status === "Past Due"){

    tag.setAttribute("class","pastdue");

}else if(allTasks[t].status === "Duetoday"){

    tag.setAttribute("class","duetoday");

}else if(allTasks[t].status === "Onhold"){

    tag.setAttribute("class","onhold");

}else if(allTasks[t].status === "Canceled"){

    tag.setAttribute("class","canceled");

}

2）（更具体地讲，您的代码），如果您注意到，则在setAttribute内部输入的是状态的小写字母

tag.setAttribute("class",allTasks[y].status.toLowerCase().replace(/\s/g, ''));
arrow.setAttribute("class","arrow2");
tag.innerHTML = allTasks[t].status;
taskCont.appendChild(tag);

Answer 5

updateTask(status, arrow, tag, taskCont) {
  arrow.setAttribute("class","arrow2");
  tag.setAttribute("class",status.toLowerCase());
  tag.innerHTML = allTasks[t].status;
  taskCont.appendChild(tag);
}

updateTask(allTasks[t].status, arrow, tag, taskCont)

注意status.toLowerCase()位。

如果要降低其脆弱性，可以使用Enum将状态映射到正确的相应标签属性。

希望这会有所帮助。

Answer 6

创建一个单独的函数来设置元素的属性并在switch语句中调用它：

function setAttrs(element, status) {
  element.setAttribute("class", status);
  element.innerHTML = status;
  return element;
}

function yourFunction {
  // ...

  // since you call it every time, keep it at the top, it will be executed once
  arrow.setAttribute("class", "arrow2");

  switch (allTasks[t].status) {
    case "Completed":
      let tagUpdated = setAttrs(tag, "completed")
      taskCont.appendChild(tagUpdated);
      break;
    case "Past Due":
      let tagUpdated = setAttrs(tag, "pastdue")
      taskCont.appendChild(tagUpdated);
      break;
    case "Duetoday":
      let tagUpdated = setAttrs(tag, "duetoday")
      taskCont.appendChild(tagUpdated);
      break;
    case "Onhold":
      let tagUpdated = setAttrs(tag, "onhold")
      taskCont.appendChild(tagUpdated);
      break;
    case "Canceled":
      let tagUpdated = setAttrs(tag, "canceled")
      taskCont.appendChild(tagUpdated);
      break;
  }
}

Answer 7

function statusToAttrib(v){
    return v.toLowerCase().replace(/\s/g,'')
}

arrow.setAttribute("class","arrow2");
tag.setAttribute("class",statusToAttrib(allTasks[t].status));
tag.innerHTML = allTasks[t].status;
taskCont.appendChild(tag);

如何在不重复代码的情况下制作if语句？

7 个答案: