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

我想制作一个包含食谱的网站。我希望人们能够喜欢这些食谱。当他们最喜欢的一个时，我希望背景颜色改变并且“最喜欢”按钮消失。

我想出了如何在他们单击 .article 类时更改背景颜色。

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

谢谢!

const container = document.querySelector("#container")
window.addEventListener("load", showLoadedFavorites)
container.addEventListener("click", clickHandler)

function clickHandler(e){
    let item = e.target

    if (item.classList.contains("article")) {
        let saveditems = getLocalFavorites()
        let index = saveditems.indexOf(item.id)
        console.log(index)

        if(index > -1){
            item.classList.remove('favorite')
            saveditems.splice(index, 1)
        } else {
            item.classList.add("favorite")
            saveditems.push(item.id)
        }
        localStorage.setItem('favorites', JSON.stringify(saveditems))
    }
}

function showLoadedFavorites(){
    let saveditems = getLocalFavorites()
    console.log(saveditems)
    for(let item of saveditems) {
        let card = document.querySelector(`#${item}`) 
        card.classList.add("favorite")
    }
}

function getLocalFavorites(){
    let favorites = localStorage.getItem("favorites")
    if(favorites) {
        console.log(favorites)
        return JSON.parse(favorites)
    } else {
        console.log("No favorites yet")
        return []
    }
}

body {
    background-color: white;
    font-family: 'Poppins', sans-serif;
    font-size:1.1em;
}

.header {
    font-size: 40px;
    display: grid;
    margin-bottom: 40px;
    text-align: center;
    color: #F17647;

}

#container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: max-content;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.article {
    background-color:white;
    padding:10px;    
    min-height:100px;
    cursor: pointer;
}

.favorite {
    background-color: yellow;
    background-image:url("star.png");
    background-repeat: no-repeat;
    background-position: top right;
}

.picture {
    background-image: url("meal.jpg");
    height:200px;
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;

}

.btn-favo, .btn-detail {
    background-color: #F17647;
    color: white;
    text-align: center;
    height: auto;
    font-size: 25px;
    margin-top: 10px;
    padding: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Favorites</title>
</head>
<body>
    <div class="header">Food Magazine</div>


    <div id="container">
        <div class="article" id="article0">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
        <div class="article" id="article1">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
        <div class="article" id="article2">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
        <div class="article" id="article3">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
        <div class="article" id="article4">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
        <div class="article" id="article5">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
        <div class="article" id="article6">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
        <div class="article" id="article7">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
        <div class="article" id="article8">
            <div class="picture"></div>
            <div class="btn-favo">Favorite</div>
            <div class="btn-detail">Detail</div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

最佳答案

您需要添加“不喜欢的”按钮并为这两个按钮指定一个 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>

然后将隐藏的unfav设置为默认状态

.btn-unfav{
    display:none;
}

并使用JavaScript将Unfavorite的显示属性切换为阻止，同时将Favorite的显示属性设置为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>

Note* - JQuery's function .show() will only set the display value to block, if you want to use anything different than display:block, let's say inline-block you will have to do it using the .css() function like this $('#article0unfav').css("display","inline-block");

关于javascript - 单击时删除按钮并更改背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60956704/

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

上一篇：javascript - 搜索引擎结果页面出现 map 未定义错误

下一篇：javascript - 解析 JSON 数据，然后将其所有值传递给另一个函数