问题描述
我需要在菜单网站上添加收藏按钮。如果这顿饭被收藏,它需要在“收藏”按钮上显示。我需要使用 HTML 和 JavaScript。代码是荷兰语,请不要担心名称。我修复了顶部的复选框,但我无法让“hartje”(这意味着:心脏)正确响应并将其添加到“收藏夹”按钮。有人可以帮我吗?
这是我的代码:
const checkBoxes = document.getElementsByTagName("input")
let actieve_types = []
for (let x = 0; x < checkBoxes.length; x++) {
const checkBox = checkBoxes[x]
checkBox.addEventListener("change",e => {
if (actieve_types.includes(checkBox.value)) {
const index_value = actieve_types.indexOf(checkBox.value)
actieve_types.splice(index_value,1)
} else {
actieve_types.push(checkBox.value)
}
updateView()
})
}
const updateView = () => {
const meals = document.getElementsByClassName("meal")
for (let x = 0; x < meals.length; x++) {
const meal = meals[x]
meal.style.display = "block"
if (actieve_types.length > 0) {
if (!actieve_types.includes(meal.dataset.type)) {
meal.style.display = "none"
}
}
}
}
document.getElementsByClassName("hartje");.onclick = function(event) {
for (var i = 0; i < faveMe.length; i++) {
if (faveMe[i].className === "hartje") {
faveMe[i].classList.replace("hartje","welFavo");
console.log(faveMe);
} else {
faveMe[i].style.visibility = "";
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/Menukaart_wk5/css/master.css">
<script src="/Menukaart_wk5/js/main.js" charset="UTF-8" defer></script>
<title>Yes!BosFood!</title>
</head>
<body>
<main>
<section>
<header>
<h1>Yes!BosFood</h1>
</header>
<ul class="filterSection">
<li>
<input type="checkBox" name="checkBox" value="alleen">
<label>Ik eet alleen |</label>
</li>
<li>
<input type="checkBox" name="checkBox" value="groot">
<label>Ik wil een groot gerecht |</label>
</li>
<li>
<input type="checkBox" name="checkBox" value="delen">
<label>Wij gaan delen</label>
</li>
</ul>
<div class="favo">
<input id="eventClick" type="button" value="Favorieten">
</div>
<article>
<ul id="itemsToFilter">
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_1.jpg" alt="Sushi close up"></figure>
<h2><strong>Sushi Box | €14.50 </strong></h2>
<p>Keuze uit 3 grote sushisoorten en 4 kleine. Of laat je verassen door de keuze van de chef!</p>
<button class="hartje"></button>
</li>
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_2.jpg" alt="vegetarische sushi"></figure>
<h2><strong>Sushi vegaBox | €19.50</strong></h2>
<p>Keuze uit 3 grote sushisoorten en 4 kleine,zonder vis. Of laat je verassen door de keuze van de chef! </p>
<button class="hartje"></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_3.jpg" alt="Grote Box met sushi"></figure>
<h2><strong>Sushi Box groot | €29.95 </strong></h2>
<p>Keuze uit 7 grote sushisoorten en 8 kleine. Ideaal om te delen! </p>
<button class="hartje"></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/pasta_1.jpg" alt="Pasta tagliatelle"></figure>
<h2><strong>Pasta tagliatelle | €12.50 </strong></h2>
<p>Altijd lekker en dit gerecht is vegetarisch!</p>
<button class="hartje"></button>
</li>
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/champ_soep.jpg" alt="Champignonsoep"></figure>
<h2><strong>Champignonsoep | €8.50 </strong></h2>
<p>Heerlijk als voorgerecht en dit gerecht is vegetarisch!</p>
<button class="hartje"></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/gnocchi.jpg" alt="Gnocchi"></figure>
<h2><strong>Gnocchi | €11.50</strong></h2>
<p>Te bestellen als vega gerecht,of met vlees!</p>
<button class="hartje"></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/ei_in_saus.jpg" alt="Shakshuka"></figure>
<h2><strong>Shakshuka | vanaf €8.50 </strong></h2>
<p>Heerlijk om mee te dippen. Kies je eigen dipsoort!</p>
<button class="hartje"></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/pizza.jpg" alt="Pizza"></figure>
<h2><strong>Pizza | vanaf €11.50 </strong></h2>
<p>Stel jouw eigen pizza samen!</p>
<button class="hartje"></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/patat.jpg" alt="Patat"></figure>
<h2><strong>Patat | vanaf €3.50 </strong></h2>
<p>Stel jouw eigen patatje samen! Ga jij voor de patat met of pak je uit met een patatje oorlog?</p>
<button class="hartje"></button>
</li>
</ul>
<footer>
<h2>Gemaakt door Simone Bos</h2>
</footer>
</article>
</section>
</main>
</body>
解决方法
我会尝试以下操作:在您的 <ul>
中,您可以像这样向按钮添加图标:
<ul id="itemsToFilter">
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_1.jpg" alt="Sushi close up"></figure>
<h2><strong>Sushi box | €14.50 </strong></h2>
<p>Keuze uit 3 grote sushisoorten en 4 kleine. Of laat je verassen door de keuze van de chef!</p>
<button class="hartje" onclick="favorizeMeal(0)"><i id="0" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_2.jpg" alt="Vegetarische sushi"></figure>
<h2><strong>Sushi vegabox | €19.50</strong></h2>
<p>Keuze uit 3 grote sushisoorten en 4 kleine,zonder vis. Of laat je verassen door de keuze van de chef! </p>
<button class="hartje" onclick="favorizeMeal(1)"><i id="1" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_3.jpg" alt="Grote box met sushi"></figure>
<h2><strong>Sushi box groot | €29.95 </strong></h2>
<p>Keuze uit 7 grote sushisoorten en 8 kleine. Ideaal om te delen! </p>
<button class="hartje" onclick="favorizeMeal(2)"><i id="2" class="fa fa-heart"></i></i></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/pasta_1.jpg" alt="Pasta tagliatelle"></figure>
<h2><strong>Pasta tagliatelle | €12.50 </strong></h2>
<p>Altijd lekker en dit gerecht is vegetarisch!</p>
<button class="hartje" onclick="favorizeMeal(3)"><i id="3" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/champ_soep.jpg" alt="Champignonsoep"></figure>
<h2><strong>Champignonsoep | €8.50 </strong></h2>
<p>Heerlijk als voorgerecht en dit gerecht is vegetarisch!</p>
<button class="hartje" onclick="favorizeMeal(4)"><i id="4" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/gnocchi.jpg" alt="Gnocchi"></figure>
<h2><strong>Gnocchi | €11.50</strong></h2>
<p>Te bestellen als vega gerecht,of met vlees!</p>
<button class="hartje" onclick="favorizeMeal(5)"><i id="5" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/ei_in_saus.jpg" alt="Shakshuka"></figure>
<h2><strong>Shakshuka | vanaf €8.50 </strong></h2>
<p>Heerlijk om mee te dippen. Kies je eigen dipsoort!</p>
<button class="hartje" onclick="favorizeMeal(6)"><i id="6" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/pizza.jpg" alt="Pizza"></figure>
<h2><strong>Pizza | vanaf €11.50 </strong></h2>
<p>Stel jouw eigen pizza samen!</p>
<button class="hartje" onclick="favorizeMeal(7)"><i id="7" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/patat.jpg" alt="Patat"></figure>
<h2><strong>Patat | vanaf €3.50 </strong></h2>
<p>Stel jouw eigen patatje samen! Ga jij voor de patat met of pak je uit met een patatje oorlog?</p>
<button class="hartje" onclick="favorizeMeal(8)"><i id="8" class="fa fa-heart-o"></i></i></button>
</li>
</ul>
要显示图标,您需要将此链接添加到我在 html 的 head 部分中使用的图标库:
<head>
...
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
还有更多图标库,请在此处查找教程:https://www.w3schools.com/icons/default.asp
然后你需要在你的 Javascript 中实现一个逻辑,如果用户点击按钮,将图标类 'fa-heart' 与 'fa-heart-o' 交换。
favorizeMeal(mealNumber) {
console.log("favorizeMeal clicked for meal number: ",mealNumber);
var selectedIcon = document.getElementById(mealNumber);
if (selectedIcon.classList.contains('fa-heart') {
selectedIcon.classList.remove("fa-heart");
selectedIcon.classList.add("fa-heart-o");
} else {
selectedIcon.classList.add("fa-heart");
selectedIcon.classList.remove("fa-heart-o");
}
}
类似的东西(虽然我没有测试过!)