Question

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

当他们单击.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>

Answer 1

您需要添加“不喜欢的”按钮，并为两个按钮指定一个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将“收藏夹”的display属性设置为“阻止”，同时将“收藏夹”的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以外的任何值，假设inline-block必须使用.css()完成像这样的功能 $('#article0unfav').css("display","inline-block");

Answer 2

您可以定义新的类.hide { display: none }并将其定义为单击时的元素。使用方法element.classList.add('hide')

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

2 个答案: