Javascript 单击时删除按钮并更改背景颜色

我想做一个食谱网站。我希望人们能够喜欢这些食谱。当他们喜欢一个我想改变背景颜色和'最喜欢'按钮消失

我知道了当他们单击.article类时如何更改背景色

但是，当我单击按钮时，如何更改背景颜色并隐藏按钮

谢谢

const container=document.querySelectorcontainer window.addEventListenerload、showLoadedFavorites container.addEventListenerclick，clickHandler 功能点击手柄{ 设item=e.target 如果item.classList.Containers条目{ 让saveditems=getLocalFavorites 让index=saveditems.indexOfitem.id console.logindex ifindex>-1{ item.classList.删除“收藏夹” saveditems.index，1 }否则{ item.classList.addfavorite saveditems.pushitem.id } localStorage.setItem'favorites'，JSON.stringifysaveditems } } 函数showLoadedFavorites{ 让saveditems=getLocalFavorites console.logsaveditems saveditems的forlet项{ let card=document.querySelector`${item}` card.classList.addfavorite } } 函数getLocalFavorites{ 让收藏夹=localStorage.getItemfavorites 伊法沃利特{ console.logfavorites 返回JSON.parsefavorites }否则{ console.log还没有收藏夹 返回[] } } 身体{ 背景色：白色； 字体系列：“Poppins”，无衬线； 字体大小：1.1米； } .标题{ 字体大小：40px； 显示：网格； 边缘底部：40px； 文本对齐：居中； 颜色：F17647； } 容器{ 显示：网格； 网格模板柱：1fr 1fr 1fr； 网格自动行：最大内容； 栅柱间隙：10px； 网格行间距：10px； } .文章{ 背景色：白色； 填充：10px； 最小高度：100px； 光标：指针； } .最爱{ 背景颜色：黄色； 背景图片：urlstar.png； 背景重复：无重复； 背景位置：右上角； } .图片{ 背景图片：urldemine.jpg； 高度：200px； 背景重复：无重复； 背景尺寸：封面； 背景位置：中心； } .btn favo，.btn详细信息{ 背景色：F17647； 颜色：白色； 文本对齐：居中； 高度：自动； 字体大小：25px； 边缘顶部：10px； 填充：10px； } 最爱 食品杂志 最喜欢的 细节 最喜欢的 细节 最喜欢的 细节 最喜欢的 细节 最喜欢的 细节 最喜欢的 细节 最喜欢的 细节 最喜欢的 细节 最喜欢的 细节

---

您可以定义新的class.hide{display:none}并单击将其添加到元素中。使用metod元素.classList.add'hide'

您需要添加不受欢迎的按钮，并为这两个按钮提供一个ID

<div class="article" id="article0">
    <div class="picture"></div>
    <div class="btn-favo" id="article0fav">Favorite</div>
    <div class="btn-unfav" id="article0unfav">Unfavorite</div>
    <div class="btn-detail">Detail</div>
</div>

并使用JavaScript将Favorite的display属性切换为block，同时将Favorite的display属性设置为none

document.getElementById("article0fav").style.display = "none";
document.getElementById("article0unfav").style.display = "block";

您可以使用JQuery实现同样的功能

$('#article0fav').hide();
$('#article0unfav').show();

为了让jquery工作，请将其放入HTML中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

注*- JQuery的函数.show只会将显示值设置为block，如果您想使用与display:block不同的任何东西， 比如说内联块，您必须使用.css来完成它 功能是这样的 $'Article0Undev'.css显示，内联块

---

欢迎来到堆栈溢出！请通读一遍，尤其是你在这里的最佳选择是做你的研究，对于相关的话题等等，并尝试一下。如果你在做了更多的研究和搜索后陷入困境，无法摆脱困境，请发布一份你的尝试，并明确指出你陷入困境的地方。人们会很乐意提供帮助。总的来说，使用了javascript，所以答案应该是javascript，而不是添加到jquery的链接，只使用两行代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>