时间戳

首页 > 解决方案 > 在哪里添加用于切换按钮文本的代码？

javascript - 在哪里添加用于切换按钮文本的代码？

问题描述

我想在单击时更改按钮的文本。单击按钮时图标会发生变化。现在我需要将文本从“添加到列表”更改为“添加到列表”。我试图为此添加代码，但我真的不明白如何将它放在哪里。这应该在第一个函数中吗？对不起，如果我听起来有点含糊，但希望有人可以帮助我。

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

function changeText() {
    var text = document.querySelectorAll("button");
    if (text.innerHTML == "Add to list") {
        text.innerHTML = "Added to list";
    } else {
        text.innerHTML = "Add to list";
    }
}

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>

标签： javascripthtmlbuttontoggle

解决方案

您有来自 querySelectorAll 的按钮引用，通过单击它可以更改内部文本和值（以便稍后检查是否相等）。

function changeText(btn) {
  if (btn.value === 'Add to list' || btn.value === '') {
   btn.value = 'Added to list';
   btn.innerHTML = '<i class="fas fa-heart"></i>Added to list';
  } else {
   btn.value = 'Add to list';
   btn.innerHTML = '<i class="far fa-heart"></i>Add to list';
  }
}

document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function () {
    changeText(btn);
}));
@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">

推荐阅读