[英]JavaScript: How can I refactor if..else statements using less repetitive code?
I have a server generated template that contains multiple elements with ids book_cat_id
, book_cat_id2
etc that I need to find and change their inline background colours to match corresponding categories我有一个服务器生成的模板,其中包含多个 ID 为
book_cat_id
、 book_cat_id2
等的元素,我需要找到并更改它们的内嵌背景颜色以匹配相应的类别
data-cat_label="Fiction"
can have any one of the categories Fiction, Fantasy, Comic, History, Technical data-cat_label="Fiction"
可以是 Fiction、Fantasy、Comic、History、Technical 中的任何一种
Is there is more efficient way of doing this for multiple colours?对于多种颜色,是否有更有效的方法?
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>
In this case, you could do something like this.在这种情况下,你可以做这样的事情。
Instead of:代替:
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;
}
You could do:你可以这样做:
book_cat_id2.style.backgroundColor = colors[id2.toLowerCase()]
Since you already have the key names, just use toLowerCase()
由于您已经有了键名,只需使用
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>
You're almost there.您快到了。 Replace the current Javascript with the following:
将当前的 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()];
You can create 2 arrays - typeName and typeColor.您可以创建 2 个数组 - typeName 和 typeColor。 typeName[0] will refer to "Fiction" and typeColor[0] will refer to "#ff7477".
typeName[0] 将指代“Fiction”,typeColor[0] 将指代“#ff7477”。 You can then make a for loop and loop through them like this:
然后,您可以创建一个 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];
}
}
You can use computed property access of object using [] 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>
If data-cat_label is named same as property in colors object, you can access the object property using bracket(colors[id1]) of dot notation(colors.id1).如果 data-cat_label 与颜色对象中的属性命名相同,则可以使用点符号(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];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.