我想用 JavaScript 使图像消失，但它仍然是一样的，为什么？

Question

我有一个使用 javascript 从一个图像传递到另一个图像的代码，但我希望当 data-slide-to 等于 1 时，图像会消失，但图像保持不变，好像什么都没有发生了，为什么它不起作用？

<section class="slider_section ">
            <div class="slider_bg_box">
               <img id="myImage" src="{{url ('assets/images/slider-bg.jpg')}}" alt="">
            </div>

            <script> 
               if($("li").attr("data-slide-to") == "1")
               {
                  document.getElementById("myImage").style.display = "none";
               }
            </script>

            <div class="container">
                  <ol class="carousel-indicators">
                     <li data-target="#customCarousel1" data-slide-to="0" class="active"></li>
                     <li data-target="#customCarousel1" data-slide-to="1" ></li>
                     <li data-target="#customCarousel1" data-slide-to="2"></li>
                  </ol>
            </div>
 </section>

Answer 1

查看 bootstrap4 文档后，您的代码似乎存在一些结构问题。我会建议先查看文档，以便在尝试使用 JavaScript 添加功能之前格式正确。以下是与您的问题相关的示例。

其次，您应该将 JavaScript 和 CSS 保存在他们自己的文件中。

注意：示例来自 www.w3schools.com.

.carousel-inner img {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Los Angeles" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="New York" width="1100" height="500">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

我想用 JavaScript 使图像消失，但它仍然是一样的，为什么？

I wanted to make an image disappear with JavaScript but it's still the same why?

html

javascript

css

bootstrap-4