Question

我有一个服务器生成的模板，其中包含ID为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

由于您已经有了键名，因此只需使用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 3

您快到了。用以下内容替换两个if块：

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

Answer 4

您可以创建2个数组-typeName和typeColor。 typeName [0]将引用“小说”，typeColor [0]将引用“＃ff7477”。然后，您可以进行for循环并像这样遍历它们：

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

您可以使用[] notation

使用对象的计算属性访问

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与colors对象中的属性命名相同，则可以使用点表示法（colors.id1）的方括号（colors [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];

JavaScript：如何使用较少重复的代码重构if..else语句？

6 个答案: