微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

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

我想做 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>

解决方法

您在所有图标中使用相同的 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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot