Я хотел, чтобы изображение исчезло с помощью JavaScript, но почему?

У меня есть код, который переходит от изображения к изображению с помощью 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>

Ваше утверждение if запускается только один раз. Вам понадобится какой-то слушатель, чтобы запустить его снова, когда data-slide-to изменится.

— 05.05.2022 17:47

Также не рекомендуется встроенный JavaScript, поскольку он у вас есть. Он всегда должен быть в своем собственном файле. Если у вас должен быть тег <script> в вашем HTML, он должен располагаться внизу страницы как последний элемент.

— 05.05.2022 17:50

@DM, как мне это сделать? Я все еще новичок в программировании

— 05.05.2022 17:56

@GuyPeace Я работаю над ответом, чтобы вы могли помочь!

— 05.05.2022 18:00

javascript html css bootstrap-4

05.05.2022 17:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Изучив документацию по bootstrap4, похоже, что у вас есть проблемы со структурой кода. Я бы рекомендовал сначала просмотреть документацию, чтобы формат был правильным, прежде чем пытаться использовать JavaScript для добавления функциональности. Ниже приведен пример, относящийся к вашему вопросу.

Во-вторых, вы должны хранить JavaScript и CSS в отдельных файлах.

Примечание. Пример взят с сайта www.w3schools.com.

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

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/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>

05.05.2022 18:08

Другие вопросы по теме

PHP MySQL Загрузить изображение, связанное со всеми свойствами, используя форму

Рассчитать общее количество столбцов в angular

Прокрутите страницу вниз, затем вверх с помощью jQuery

Как сделать радиокнопки непонятными после отправки фильтра Rails

Почему я получаю сообщение «Элементы формы не имеют связанных меток», хотя с вводом связана метка?

Как отобразить значок красного флажка в Salesforce LWC с помощью SLDS?

Почему программы чтения с экрана перемещаются по переключателям/флажкам, выбирая их напрямую?

Остановить влияние на позицию элемента содержимого других элементов

Удалить/скрыть текст с помощью css

Как фильтровать гласные и согласные буквы, сгенерированные из случайной строки

Я хотел, чтобы изображение исчезло с помощью JavaScript, но почему?

Ответы 1

Другие вопросы по теме

Похожие вопросы