将心形图标添加到 Bootstrap 5 Carousel 时出现问题

Question

Bootstrap 5 轮播中的心形/收藏夹图标不起作用。如何向其添加适当的功能，使其在单击时显示为填充（红色），并在再次单击时显示为空（白色）。

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
     <!-- Heart Icon -->
     <div class="heart-icon">
        <i class="bi bi-heart"></i>
    </div>
    <div class="carousel-indicators ml-0 mr-4 w-25">
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 4"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 5"></button>
      </div>
    <div class="carousel-inner w-50 rounded-4">
       <!--  Video Slide -->
       <div class="carousel-item active">
          <video class="d-block w-100 rounded-4" controls>
            <source src="{{ asset('venues/venue1/vid1.mp4')}}" type="video/mp4">
            Your browser does not support the video tag.
          </video>
          {{-- <div class="carousel-caption d-none d-md-block">
            <h5>Soccer Pro</h5>
            <p>The best stadium at affordable rates</p>
          </div> --}}
        </div>
      <!-- Image Slide 1 -->
      <div class="carousel-item">
        <img src="{{ asset('venues/venue1/1.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
        {{-- <div class="carousel-caption d-none d-md-block">
          <h5>Soccer Pro</h5>
          <p>Etihad vs DXB Strikers</p>
        </div> --}}
      </div>
     <!-- Image Slide 2 -->
     <div class="carousel-item">
      <img src="{{ asset('venues/venue1/2.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
      {{-- <div class="carousel-caption d-none d-md-block">
        <h5>Soccer Pro</h5>
        <p>Etihad vs DXB Strikers</p>
      </div> --}}
    </div>
     <!-- Image Slide 3 -->
     <div class="carousel-item">
      <img src="{{ asset('venues/venue1/3.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
      {{-- <div class="carousel-caption d-none d-md-block">
        <h5>Soccer Pro</h5>
        <p>Etihad vs DXB Strikers</p>
      </div> --}}
    </div>
     <!-- Image Slide 4 -->
     <div class="carousel-item">
      <img src="{{ asset('venues/venue1/4.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
      {{-- <div class="carousel-caption d-none d-md-block">
        <h5>Soccer Pro</h5>
        <p>Etihad vs DXB Strikers</p>
      </div> --}}
    </div>
  
    </div>
    <!-- Previous & Next buttons -->
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
  
  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <!-- CSS for Heart Icon -->
<style>
    .heart-icon {
        position: absolute;
        top: 10px;
        right: 300px;
        z-index: 1000;
    }
    .heart-icon i {
        font-size: 1.5rem;
        color: red; 
        cursor: pointer;
    }
    
</style>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- JavaScript to handle click event on heart icon -->
<script>
    $(document).ready(function() {
        $('.heart-icon').click(function() {
            var heartIcon = $(this).find('i');
            if (heartIcon.hasClass('bi-heart')) {
                heartIcon.removeClass('bi-heart').addClass('bi-heart-fill')/* .css('color', 'red') */;
            } else {
                heartIcon.removeClass('bi-heart-fill').addClass('bi-heart')/* .css('color', 'white') */;
            }
        });
    });
</script>

我尝试使用 javascript 和 css 属性更改类属性，但它不起作用。

Answer 1

我刚刚检查了上面的代码并在我的计算机上测试了它，你做的一切都是正确的，你只需要在标题中包含引导程序图标样式，更新下面的文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Carousel with Icon</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <!-- CSS for Heart Icon -->
</head>

<body>

    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Heart Icon -->
        <div class="heart-icon">
            <i class="bi bi-heart"></i>
        </div>
        <div class="carousel-indicators ml-0 mr-4 w-25">
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true"
                aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 4"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 5"></button>
        </div>
        <div class="carousel-inner w-50 rounded-4">
            <!--  Video Slide -->
            <div class="carousel-item active">
                <video class="d-block w-100 rounded-4" controls>
                    <source src="{{ asset('venues/venue1/vid1.mp4')}}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                {{-- <div class="carousel-caption d-none d-md-block">
                    <h5>Soccer Pro</h5>
                    <p>The best stadium at affordable rates</p>
                </div> --}}
            </div>
            <!-- Image Slide 1 -->
            <div class="carousel-item">
                <img src="{{ asset('venues/venue1/1.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
                {{-- <div class="carousel-caption d-none d-md-block">
                    <h5>Soccer Pro</h5>
                    <p>Etihad vs DXB Strikers</p>
                </div> --}}
            </div>
            <!-- Image Slide 2 -->
            <div class="carousel-item">
                <img src="{{ asset('venues/venue1/2.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
                {{-- <div class="carousel-caption d-none d-md-block">
                    <h5>Soccer Pro</h5>
                    <p>Etihad vs DXB Strikers</p>
                </div> --}}
            </div>
            <!-- Image Slide 3 -->
            <div class="carousel-item">
                <img src="{{ asset('venues/venue1/3.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
                {{-- <div class="carousel-caption d-none d-md-block">
                    <h5>Soccer Pro</h5>
                    <p>Etihad vs DXB Strikers</p>
                </div> --}}
            </div>
            <!-- Image Slide 4 -->
            <div class="carousel-item">
                <img src="{{ asset('venues/venue1/4.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
                {{-- <div class="carousel-caption d-none d-md-block">
                    <h5>Soccer Pro</h5>
                    <p>Etihad vs DXB Strikers</p>
                </div> --}}
            </div>

        </div>
        <!-- Previous & Next buttons -->
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <!-- CSS for Heart Icon -->
    <style>
        .heart-icon {
            position: absolute;
            top: 10px;
            right: 300px;
            z-index: 1000;
        }

        .heart-icon i {
            font-size: 1.5rem;
            color: red;
            cursor: pointer;
        }
    </style>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- JavaScript to handle click event on heart icon -->
    <script>
        $(document).ready(function () {
            $('.heart-icon').click(function () {
                var heartIcon = $(this).find('i');
                if (heartIcon.hasClass('bi-heart')) {
                    heartIcon.removeClass('bi-heart').addClass('bi-heart-fill')/* .css('color', 'red') */;
                } else {
                    heartIcon.removeClass('bi-heart-fill').addClass('bi-heart')/* .css('color', 'white') */;
                }
            });
        });
    </script>