如何创建一个系统，让用户可以在网页上喜欢/不喜欢个别课程

Question

我正在尝试创建一个"收藏夹"系统，用户可以单击按钮右上角的星号，将该课程添加到他们的"收藏夹"列表中。以下是所述按钮的HTML(共有6个，所有6个都相同(：

<button class="divflexbuttonitem">
<div class="libraryfaviconcontainer">
<i class="libraryfavicon" onclick="toggleFavourite()"></i>
</div>
</button>

下面是我(尝试(toggleFavourite((函数的JavaScript：

function toggleFavourite() {
console.log("Running toggleFavourite();");
var favicon = document.getElementsByClassName("libraryfavicon");
var faviconCount = favicon.length;
var favArray = new Array();
var favArrayString = favArray.toString();
var i;
for(i = 0; i < faviconCount; i++) {
favArray.push(favicon[i].id);
}
alert(favArray.length);
alert(favArrayString);
let favourite = false;
if (favicon[i].style.backgroundImage == 'url("libraryfavselected.png")') {
favourite = true;
}
else if (favicon[i].style.backgroundImage == 'url("libraryfavunselected.png")') {
favourite = false;
}
if (!favourite) {
favicon[i].style.backgroundImage = 'url("libraryfavselected.png")';
console.log("Added to Favourites");
}
else {
favicon[i].style.backgroundImage = 'url("libraryfavunselected.png")';
console.log("Removed from Favourites");
}
}

我正在尝试获取具有特定类名的所有元素，将它们添加到数组中，并从数组中调用它们，以更改按下的特定收藏夹的"收藏夹"url。然而，我的代码无论如何都不起作用，我不知道如何正确编码。

Answer 1

有更好的方法来构建这种类型的应用程序，但这里有一些非常简单的代码可以帮助您入门。

您可以看到，当单击一个项目时，fav类是打开和关闭的，然后我们可以通过使用fav类查询所有元素来获取所有当前收藏夹。

const toggleFavourite = (event) => {
if (event.target){
const clickTarget = event.target;
clickTarget.classList.toggle('fav')
}
}
//Example use, get all favs and attach the text as a new element
const getFavs = () => {
const favs = document.querySelectorAll('.fav');
const favContainer = document.querySelector('.favs')
favContainer.innerHTML = "";
for( let fav of favs){
let newFav = document.createElement('div');
newFav.textContent = fav.textContent;
favContainer.appendChild(newFav)
}
}

.fav {
color: red;
}

<i class="" onclick="toggleFavourite(event)">1</i>
<i class="" onclick="toggleFavourite(event)">2</i>
<i class="" onclick="toggleFavourite(event)">3</i>
<i class="" onclick="toggleFavourite(event)">4</i>
<i class="" onclick="toggleFavourite(event)">5</i>
<button id="getFavs" onclick="getFavs()">Get Favs</button>
<section class='favs'>
</section>