如何在多个按钮上切换相同的 fa fa 图标？

【问题标题】：How do I toggle the same fa fa icons on multiple buttons?如何在多个按钮上切换相同的 fa fa 图标？
【发布时间】：2021-05-19 15:21:44
【问题描述】：

我想做 4 个按钮来做同样的事情。当您单击按钮时，心是充满的，当您再次单击时，心是空的。但只有第一个按钮有效。当我单击其他三个按钮时，第一个按钮会熄灭。我真的不明白我需要做什么。如何使所有 4 个按钮都起作用？

var btn = document.getElementById('btn');


function Toggle() {
    if (btn.classList.contains("far")) {
        btn.classList.remove("far");
        btn.classList.add("fas");
    }else{
        btn.classList.remove("fas");
        btn.classList.add("far");
    }
}

document.querySelectorAll('button').forEach((btn) => btn.addEventListener('click', Toggle, (e) => { console.log('hello'); }))
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght@300;400;600;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.title {
    text-align: center;
    padding: 1.8rem;
    font-size: 2rem;
    color: black;
    font-family: 'Lexend Mega', sans-serif;
}

.populair-movies {
    justify-content: center;
    display: flex;
}

.populair-movies h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    padding-top: 0.2rem;
    padding-bottom: 0.7rem;
}

.populair-movies p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
}

.stars {
    padding-bottom: 0.3rem;
}

.populair-movies .card-container .card {
    height: 300px;
    width: 200px;
    margin: 0.5rem;
}

.populair-movies .card-container .card img {
    height: 100%;
    width: 100%;
}

.styling-btn {
    margin-top: 1rem;
    padding: 0.5rem 1.1rem 0.5rem 0.5rem;
    background: blue;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    border: none;
    color: #e8efff;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
}

.styling-btn i {
    margin-right: 0.7rem;
    margin-left: 0.3rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Populair Movies</title>

    <!-- font awesome cdn link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

    <!-- css file -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

    <h2 class="title">POPULAIR MOVIES</h2>

    <section class="populair-movies">
        <div class="card-container">
            <div class="card">
                <img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
                <div class="info">
                    <h3>The Midnight Sky</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            5,6
                        </p>
                    </div>
                    <p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
                    <button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk@._V1_.jpg" alt="Escape from Pretoria">
                <div class="info">
                    <h3>Escape from Pretoria</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            6,8
                        </p>
                    </div>
                    <p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
                    </p>
                    <button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc@._V1_.jpg" alt="Kadaver">
                <div class="info">
                    <h3>Kadaver</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            5,1
                        </p>
                    </div>
                    <p>2020 ‧ Drama/Horror ‧ 1 u 26 m
                    </p>
                    <button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
                <div class="info">
                    <h3>The Dig</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            7,2
                        </p>
                    </div>
                    <p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
                    </p>
                    <button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

    </section>

    <script src="js/script.js"></script>

</body></html>

【问题讨论】：

    标签： javascript button icons font-awesome togglebutton


    【解决方案1】：

    您在所有图标中使用相同的id。 JavaScript 只获取第一个 id 的元素。

    function toggle(index) {
    const icon = document.querySelectorAll("button i")[index];
    icon.classList.toggle("far");
    icon.classList.toggle("fas");
}

document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function() { 
    toggle(index); 
}));
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght@300;400;600;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.title {
    text-align: center;
    padding: 1.8rem;
    font-size: 2rem;
    color: black;
    font-family: 'Lexend Mega', sans-serif;
}

.populair-movies {
    justify-content: center;
    display: flex;
}

.populair-movies h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    padding-top: 0.2rem;
    padding-bottom: 0.7rem;
}

.populair-movies p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
}

.stars {
    padding-bottom: 0.3rem;
}

.populair-movies .card-container .card {
    height: 300px;
    width: 200px;
    margin: 0.5rem;
}

.populair-movies .card-container .card img {
    height: 100%;
    width: 100%;
}

.styling-btn {
    margin-top: 1rem;
    padding: 0.5rem 1.1rem 0.5rem 0.5rem;
    background: blue;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    border: none;
    color: #e8efff;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
}

.styling-btn i {
    margin-right: 0.7rem;
    margin-left: 0.3rem;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Populair Movies</title>

    <!-- font awesome cdn link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

    <!-- css file -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

    <h2 class="title">POPULAIR MOVIES</h2>

    <section class="populair-movies">
        <div class="card-container">
            <div class="card">
                <img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
                <div class="info">
                    <h3>The Midnight Sky</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            5,6
                        </p>
                    </div>
                    <p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
                    <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk@._V1_.jpg" alt="Escape from Pretoria">
                <div class="info">
                    <h3>Escape from Pretoria</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            6,8
                        </p>
                    </div>
                    <p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
                    </p>
                    <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc@._V1_.jpg" alt="Kadaver">
                <div class="info">
                    <h3>Kadaver</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            5,1
                        </p>
                    </div>
                    <p>2020 ‧ Drama/Horror ‧ 1 u 26 m
                    </p>
                    <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
                <div class="info">
                    <h3>The Dig</h3>
                    <div class="stars">
                        <p>
                            <i class="fas fa-star"></i>
                            7,2
                        </p>
                    </div>
                    <p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
                    </p>
                    <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
                </div>
            </div>
        </div>

    </section>

    <script src="js/script.js"></script>

</body></html>

    【讨论】：

    • 非常感谢。但是目标事件有什么作用呢？
    • e.target 获取确切的 HTML 元素，即button，这样您就可以获取该元素的所有属性。 .children[0] 选择 button 的第一个孩子，即 i。如果你愿意，我可以为你简化。
    • 如果你愿意，请做！ :-)
    • 现在检查，告诉我是否更有意义
    • 谢谢！我认为这对我来说更有意义
    猜你喜欢
    • 2015-12-14
    • 2020-03-14
    • 2021-10-18
    • 2014-10-31
    • 1970-01-01
    • 2018-04-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode