如何在我的网站上添加收藏选项？
[英]How do I add a favorite option on my site?
问题描述
我需要在菜单网站上添加一个收藏按钮。 如果这顿饭是最喜欢的，它需要在“favorieten”按钮上显示出来。 我需要使用 HTML 和 JavaScript。 代码是荷兰语，请不要担心名称。 我修复了顶部的复选框，但我无法让“hartje”（这意味着：心脏）正确响应并将其添加到“Favorieten”按钮。 有人能帮我吗？
这是我的代码：
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 | &euro.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 &euro.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>
1 个解决方案
解决方案1
0 已采纳 2021-03-23 14:05:24
我会尝试以下操作：在您的<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>
...
<!-- 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 中实现一个逻辑，如果用户单击该按钮，该逻辑将图标 class '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");
}
}
像这样的东西（虽然我没有测试它！）
如何获取我的复选框值和选项值相加并将总和输入到我的文本区域？
[英]How do I get my checkbox values and option values to add up and enter the sum into my text area?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.