JavaScript 程序只有在重新加载页面后才能工作

【问题标题】：JavaScript program is only working after reloading the pageJavaScript 程序只有在重新加载页面后才能工作
【发布时间】：2021-07-31 18:44:40
【问题描述】：

我是初学者，正在学习 JavaScript。

当屏幕尺寸小于或等于 576px 时，我正在使用 JavaScript 添加一些 Bootstrap 类。

我已经编写了 JavaScript 代码，它只是在重新加载网页后才添加所需的类。

我的代码：

var sliderOne = document.getElementById('slider-1');
var sliderTwo = document.getElementById('slider-2');
var sliderThree = document.getElementById('slider-3');

// Adding ".d-flex .flex-column-reverse .text-center" classes to the Carousel

var x = document.documentElement.clientWidth
if (x <= 576) {
    sliderOne.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.add('d-flex', 'flex-column-reverse', 'text-center')
} else {
    sliderOne.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
}
.carousel-bg {
    background-color: #fceae8;
}

.price {
    color: #ff136f;
}

.buy-now {
    background: linear-gradient(to bottom, #ff589b 0%, #ff136f 100%);
    color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 09 - Panda Ecommerce usign Bootstrap</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- My Custom CSS Link -->
    <link rel="stylesheet" href="./style.css">
</head>

<body>

<div class="container mb-5 p-0">
        <div id="carouselExampleIndicators" class="carousel slide carousel-bg" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner p-5">
                <div class="carousel-item active">
                    <div class="row align-items-center" id="slider-1">
                        <div class="col-md-7">
                            <h1>Heavy Bass Bluetooth Headphone</h1>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci
                                minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
                            <h1 class="price">$259.99</h1>
                            <button class="btn buy-now">Buy Now</button>
                        </div>
                        <div class="col-md-5">
                            <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756485/StackOverflow/headphone_bfi8ip.png" class="d-block w-100" alt="...">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row align-items-center" id="slider-2">
                        <div class="col-md-7">
                            <h1>4k Ultra HD Wide Angle Smart TV</h1>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci
                                minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
                            <h1 class="price">$1299.99</h1>
                            <button class="btn buy-now">Buy Now</button>
                        </div>
                        <div class="col-md-5">
                            <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/tv_dx8zzr.png" class="d-block w-100" alt="...">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row align-items-center" id="slider-3">
                        <div class="col-md-7">
                            <h1>Xbox - Supreme Gaming Experience</h1>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci
                                minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
                            <h1 class="price">$849.99</h1>
                            <button class="btn buy-now">Buy Now</button>
                        </div>
                        <div class="col-md-5">
                            <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/xbox_iat1yy.png" class="d-block w-100" alt="...">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    
    <!-- JavaScript -->

    <script src="./main.js"></script>

</body>

</html>

我正在使用#slider-1、#slider-2、#slider-3 这些 id 来添加引导类。

请查看它们并帮助我解决问题。

谢谢。

【问题讨论】：

  • 您需要添加条件来运行在窗口调整大小时添加类的代码。

标签： javascript html css twitter-bootstrap


【解决方案1】：

您可以添加resize 事件侦听器，以便在调整页面大小时重新评估代码。

这是附加事件侦听器的方式：

window.addEventListener("resize", () => {})

这就是您的代码中的样子：

var sliderOne = document.getElementById('slider-1');
var sliderTwo = document.getElementById('slider-2');
var sliderThree = document.getElementById('slider-3');

// Adding ".d-flex .flex-column-reverse .text-center" classes to the Carousel

window.addEventListener("resize", () => {
  var x = document.documentElement.clientWidth
  if (x <= 576) {
    sliderOne.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.add('d-flex', 'flex-column-reverse', 'text-center')
  } else {
    sliderOne.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
  }
})
.carousel-bg {
  background-color: #fceae8;
}

.price {
  color: #ff136f;
}

.buy-now {
  background: linear-gradient(to bottom, #ff589b 0%, #ff136f 100%);
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module 09 - Panda Ecommerce usign Bootstrap</title>
  <!-- Bootstrap CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- My Custom CSS Link -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <div class="container mb-5 p-0">
    <div id="carouselExampleIndicators" class="carousel slide carousel-bg" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner p-5">
        <div class="carousel-item active">
          <div class="row align-items-center" id="slider-1">
            <div class="col-md-7">
              <h1>Heavy Bass Bluetooth Headphone</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$259.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756485/StackOverflow/headphone_bfi8ip.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row align-items-center" id="slider-2">
            <div class="col-md-7">
              <h1>4k Ultra HD Wide Angle Smart TV</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$1299.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/tv_dx8zzr.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row align-items-center" id="slider-3">
            <div class="col-md-7">
              <h1>Xbox - Supreme Gaming Experience</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$849.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/xbox_iat1yy.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <!-- JavaScript -->

  <script src="./main.js"></script>

</body>

</html>

【讨论】：

  • 非常感谢先生。你的回答解决了我的问题。
【解决方案2】：

给窗口添加一个resize事件监听器：

var sliderOne = document.getElementById('slider-1');
var sliderTwo = document.getElementById('slider-2');
var sliderThree = document.getElementById('slider-3');

// Adding ".d-flex .flex-column-reverse .text-center" classes to the Carousel
function updateAccordingToScreenWidth() {
  var x = document.documentElement.clientWidth
  if (x <= 576) {
    sliderOne.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.add('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.add('d-flex', 'flex-column-reverse', 'text-center')
  } else {
    sliderOne.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderTwo.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
    sliderThree.classList.remove('d-flex', 'flex-column-reverse', 'text-center')
  }
}
updateAccordingToScreenWidth();
window.addEventListener('resize', updateAccordingToScreenWidth);
.carousel-bg {
  background-color: #fceae8;
}

.price {
  color: #ff136f;
}

.buy-now {
  background: linear-gradient(to bottom, #ff589b 0%, #ff136f 100%);
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module 09 - Panda Ecommerce usign Bootstrap</title>
  <!-- Bootstrap CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- My Custom CSS Link -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <div class="container mb-5 p-0">
    <div id="carouselExampleIndicators" class="carousel slide carousel-bg" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner p-5">
        <div class="carousel-item active">
          <div class="row align-items-center" id="slider-1">
            <div class="col-md-7">
              <h1>Heavy Bass Bluetooth Headphone</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$259.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756485/StackOverflow/headphone_bfi8ip.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row align-items-center" id="slider-2">
            <div class="col-md-7">
              <h1>4k Ultra HD Wide Angle Smart TV</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$1299.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/tv_dx8zzr.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row align-items-center" id="slider-3">
            <div class="col-md-7">
              <h1>Xbox - Supreme Gaming Experience</h1>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aperiam in adipisci minima debitis non molestias, quasi voluptatibus repellat ipsa.</p>
              <h1 class="price">$849.99</h1>
              <button class="btn buy-now">Buy Now</button>
            </div>
            <div class="col-md-5">
              <img src="https://res.cloudinary.com/djz3p8sux/image/upload/v1627756484/StackOverflow/xbox_iat1yy.png" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <!-- JavaScript -->

  <script src="./main.js"></script>

</body>

</html>

【讨论】：

  • 非常感谢您的精彩回答。
【解决方案3】：

window.addEventListener("resize", () => {})

要了解有关活动的更多信息：

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

【讨论】：

    猜你喜欢
    • 2017-07-24
    • 1970-01-01
    • 1970-01-01
    • 2014-11-16
    • 2021-07-26
    • 2018-08-01
    • 2014-03-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode