我浏览了很多有关此问题的其他文章，但似乎找不到适合我特定问题的答案。基本上我有一个显示卡的“应用”页面。每张卡都是一个单独的应用程序。这些卡是使用函数内部的模板文字从JavaScript对象生成的。我有三个单独的对象，一个用于Engineering，Office和In House。
我需要做什么？
现在，当您加载网站时，只会遇到代表类别的三张卡片。我想根据用户想要的类别从其他对象生成项目。例如：当用户单击Engineering卡上的按钮时，将仅生成approved_Engineering_Software对象内的项目。
我遇到的问题是在模板文字函数中使用if statements时遇到问题。我希望能够做这样的事情：
function categoryTemplate(card) {
if (`${card.title}` == "Engineering"){
return `
<card class="nested">
<img class="image" src="${card.icon}">
<div class="text">
<h3>${card.title}</h3>
<p>${card.description}</p>
<button class="request-button" onclick="show_Engineering_items()">Request</button>
</div>
</card>
`;
}
}
我已经检查了here here和here，但是这些链接中给出的答案均未成功运行。
如果您需要更多上下文，这是我的代码：
的HTML
<!DOCTYPE html>
<html>
<head>
<title>Software Request</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body class="main-page">
<div id="category-view"></div>
<div id="app"></div>
<script src="script.js"></script>
</body>
</html>
的JavaScript
const main_Category_View = [
{
title: "Engineering",
description: "From Autocad to something else that I will write in later, all your Enginerring Software is found here",
icon: "Assets/docker1.png"
},
{
title: "Office",
description: "General purpose office applications e.g Microsoft Office, Excel, Powerpoint, Visio etc",
icon: "Assets/docker1.png"
},
{
title: "In House",
description: "Apps build by In House specifically for In House",
icon: "Assets/docker1.png"
}
];
const approved_Engineering_Software = [
{
title: "Microsoft Azure",
description: "Microsoft Azure is a cloud computing service created by Microsoft for building, testing, deploying, and managing\
applications and services through Microsoft-managed data centers.",
icon: "Assets/azure.png"
},
{
title: "Visual Studio Code",
description: "Visual Studio Code is a source-code editor developed by Microsoft for Windows, Linux and macOS. It includes support \
for debugging, embedded Git control and GitHub, and code refactoring.",
icon: "Assets/vscode.png"
},
];
const approved_Office_Software = [
{
title: "Microsoft Word",
description: "Microsoft Word is a word processor developed by Microsoft. It was first released on October 25, 1983 under the name Multi-Tool Word for Xenix systems.",
icon: "Assets/word.png"
}
];
//sorts everything perfectly
var sortByProperty = function (property) {
return function (x, y) {
//basically returns nothing if they are equal,
//or returns the item that is greater than the lesser
return ((x[property] === y[property]) ? 0 : ((x[property] > y[property]) ? 1 : -1));
};
};
// completes the rest of the structure of the cards
function softTemplate(item) {
return `
<card class="nested">
<img class="image" src="${item.icon}">
<div class="text">
<!--<button class="request-button" onclick="getDescription('${item.description}')">Request</button> -->
<h3>${item.title}</h3>
<p>${item.description}</p>
<button class="request-button" onclick="getDesc()">Request</button>
</div>
</card>
`;
}
function categoryTemplate(card) {
return `
<card class="nested">
<img class="image" src="${card.icon}">
<div class="text">
<!--<button class="request-button" onclick="getDescription('${card.description}')">Request</button> -->
<h3>${card.title}</h3>
<p>${card.description}</p>
<button class="request-button" onclick="show_items()">Request</button>
</div>
</card>
`;
}
document.getElementById("category-view").innerHTML = `
<div class="stack">
<main class="grid">
${main_Category_View.map(categoryTemplate).join("")}
</main>
</div>
`;
let sorted_Office_List = approved_Office_Software.sort(sortByProperty('title'));
let sorted_Engineering_List = approved_Engineering_Software.sort(sortByProperty('title'));
// Sets up the structure of the page and sends our Template Literal to two functions for work.
function show_items() {
document.getElementById("app").innerHTML = `
<div class="stack">
<main class="grid">
${sorted_Office_List.map(getDesc).join("")}
${sorted_Office_List.map(softTemplate).join("")}
</main>
</div>
`;
}
function show_Engineering_items() {
document.getElementById("app").innerHTML = `
<div class="stack">
<main class="grid">
${sorted_Office_List.map(softTemplate).join("")}
</main>
</div>
`;
}
最佳答案
模板文字将转换为字符串。
你有：
if (`${card.description} == "Engineering"`)
将被翻译为：
if('Engineering == "Engineering"')
非空字符串是真实的。您想做的可能是：
if (card.description === "Engineering")