文章/答案/技术大牛

发布

社区首页 >问答首页 >JavaScript程序只有在重新加载页面后才能工作。

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

Stack Overflow用户

提问于 2021-07-31 18:44:40

回答 3查看 42关注 0票数 0

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

当屏幕大小小于或等于576 or时，我使用JavaScript添加一些引导类。

我已经编写了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

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-07-31 18:52:52

您可以添加一个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>

票数 1

Stack Overflow用户

发布于 2021-07-31 18:53:17

将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>

票数 1

Stack Overflow用户

发布于 2021-08-01 10:43:10

Window.addEventListener(“调整大小”，() => {})

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68604930

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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