JavaScript:如果使用较少的重复代码else语句，我该如何重构

Question

我有一个服务器生成的模板，其中包含具有IDS book_cat_id，book_cat_id2等的多个元素，我需要查找并更改其内联背景颜色以匹配相应的类别

data-cat_label="Fiction"可以有任何类别的虚构，幻想，漫画，历史，技术

是否有更有效的方法可以为多种颜色做到这一点？

    const colors =	{
     fiction: "#ff7477",  
     fantasy: "#7dbb65",  
     technical: "#BC9DCA", 
     comic: "#00A2E0", 
     history: "#ff0099", 
     health: "#f59e2e" 
    }
    let id1   = book_cat_id.getAttribute("data-cat_label");
    let id2   = book_cat_id2.getAttribute("data-cat_label");
    if(id1 === 'Fiction') {
          book_cat_id.style.backgroundColor = colors.fiction;
      }else if (id1 === 'Fantasy') {
           book_cat_id.style.backgroundColor = colors.fantasy;
      }else if (id1 === 'Comic') {
           book_cat_id.style.backgroundColor = colors.comic;
      }else if (id1 === 'History') {
           book_cat_id.style.backgroundColor = colors.history;
      }
      
    if(id2 === 'Fiction') {
          book_cat_id2.style.backgroundColor = colors.fiction;
      }else if (id2 === 'Fantasy') {
           book_cat_id2.style.backgroundColor = colors.fantasy;
      }else if (id2 === 'Comic') {
           book_cat_id2.style.backgroundColor = colors.comic;
      }else if (id2 === 'History') {
           book_cat_id2.style.backgroundColor = colors.history;
      }

    <table>
      <tr>
        <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;">
          Book
        </td>
      </tr>
      <tr>
        <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;">
          Book 
        </td>
      </tr>
    </table>
      
 
    
           

Answer 1

在这种情况下，您可以做这样的事情。

而不是：

if(id2 === 'Fiction') {
    book_cat_id2.style.backgroundColor = colors.fiction;
}else if (id2 === 'Fantasy') {
     book_cat_id2.style.backgroundColor = colors.fantasy;
}else if (id2 === 'Comic') {
     book_cat_id2.style.backgroundColor = colors.comic;
}else if (id2 === 'History') {
     book_cat_id2.style.backgroundColor = colors.history;
}

您可以做：

book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()]

Answer 2

你快到了。用以下内容替换当前的JavaScript：

const colors ={
    fiction: "#ff7477",  
    fantasy: "#7dbb65",  
    technical: "#BC9DCA", 
    comic: "#00A2E0", 
    history: "#ff0099", 
    health: "#f59e2e" 
}
let id1 = book_cat_id.getAttribute("data-cat_label");
let id2 = book_cat_id2.getAttribute("data-cat_label");
// Replaces if statements with a direct lookup by ID
book_cat_id.style.backgroundColor = colors[id1.toLowerCase()];
book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()];

Answer 3

由于您已经拥有关键名称，只需使用toLowerCase()

const colors = {
  fiction: "#ff7477",
  fantasy: "#7dbb65",
  technical: "#BC9DCA",
  comic: "#00A2E0",
  history: "#ff0099",
  health: "#f59e2e"
}
let id1 = book_cat_id.getAttribute("data-cat_label").toLowerCase();
let id2 = book_cat_id2.getAttribute("data-cat_label").toLowerCase();
book_cat_id.style.backgroundColor = colors[id1];
book_cat_id2.style.backgroundColor = colors[id2];

<table>
  <tr>
    <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;">
      Book
    </td>
  </tr>
  <tr>
    <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;">
      Book
    </td>
  </tr>
</table>

Answer 4

您可以创建2个数组-TypeName和TypeColor。TypeName [0]将参考"虚构"，TypeColor [0]将参考"＃ff7477"。然后，您可以像这样做一个循环并通过它们循环：

const typeColors = [
 "#ff7477",  
 "#7dbb65",  
 "#BC9DCA", 
 "#00A2E0", 
 "#ff0099", 
 "#f59e2e" 
];
const typeNames = [
 "Fiction",
 "Fantasy",
 "Technical",
 "Comic",
 "History",
 "Health"
];
let id1   = book_cat_id.getAttribute("data-cat_label");
let id2   = book_cat_id2.getAttribute("data-cat_label");
for (var i = 0; i<typeColors.length; i++) {
    if (id1 == typeNames[i]) {
        book_cat_id.style.backgroundColor = typeColors[i];
    }
    if (id2 == typeNames[i]) {
        book_cat_id2.style.backgroundColor = typeColors[i];
    }
}

Answer 5

您可以使用 []符号

使用对象的计算属性访问

const colors =	{
 fiction: "#ff7477",  
 fantasy: "#7dbb65",  
 technical: "#BC9DCA", 
 comic: "#00A2E0", 
 history: "#ff0099", 
 health: "#f59e2e" 
}
let id1   = book_cat_id.getAttribute("data-cat_label");
let id2   = book_cat_id2.getAttribute("data-cat_label");
book_cat_id.style.backgroundColor = colors[id1.toLowerCase()]
book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()]

<table>
  <tr>
    <td id="book_cat_id" data-cat_label="Fiction" style="background-color:#ff0000;">
      Book
    </td>
  </tr>
  <tr>
    <td id="book_cat_id2" data-cat_label="Fantasy" style="background-color:#ff0000;">
      Book 
    </td>
  </tr>
</table>

Answer 6

如果data-cat_label与颜色对象中的属性相同，则可以使用dot note(colors.id.id1(的括号(颜色[id1](访问对象属性。

 let id1   = book_cat_id.getAttribute("data-cat_label").toLowerCase();
 let id2   = book_cat_id2.getAttribute("data-cat_label").toLowerCase();
 book_cat_id.style.backgroundColor = colors[id1];
 book_cat_id2.style.backgroundColor = colors[id2];