Question

如果我将其保留在函数外部，则代码将运行我的“ if”，“ else if”和“ else”，问题在于它应该随着更改浏览器的宽度而更新，以便该网站可以完全响应，但仅在刷新页面时更新。

当我将其放在函数中并基本上使用与受浏览器宽度影响的其他逻辑相同的逻辑时，它只是行不通。

我是一个初学者，我不知道我是否显示了足够的代码，但这是：

function setVertical() {
  if ($(window).width() > 1024) {
    $('.multiple-items').slick({
      infinite: true,
      vertical: true,
      slidesToShow: 3,
      slidesToScroll: 3,
      verticalSwiping: true,
      prevArrow: $('.top-arrow'),
      nextArrow: $('.bottom-arrow')
    });
  } else if ($(window).width() > 800) {
    $('#top-button').removeClass('fa-arrow-up');
    $('#bottom-button').removeClass('fa-arrow-down');
    $('#top-button').addClass('fa-arrow-left');
    $('#bottom-button').addClass('fa-arrow-right');
    $('.multiple-items').slick({
      infinite: true,
      vertical: false,
      slidesToShow: 4,
      slidesToScroll: 4,
      verticalSwiping: false,
      prevArrow: $('.top-arrow'),
      nextArrow: $('.bottom-arrow')
    });
  } else {
    $('#top-button').removeClass('fa-arrow-up');
    $('#bottom-button').removeClass('fa-arrow-down');
    $('#top-button').addClass('fa-arrow-left');
    $('#bottom-button').addClass('fa-arrow-right');
    $('.multiple-items').slick({
      infinite: true,
      vertical: false,
      slidesToShow: 2,
      slidesToScroll: 2,
      verticalSwiping: false,
      prevArrow: $('.top-arrow'),
      nextArrow: $('.bottom-arrow')
    });
  }
}
$(document).ready(function() {

  // Slick carousel
  setVertical();

  $(window).resize(function() {
    setVertical();
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<div class="product-width slide-center produtos-pad">
  <button id="top-button" type="button" class="top-arrow fa fa-arrow-up slide-button"></button>
  <div class="multiple-items slider-image slide-text">
    <div><img src="img/slidervertical/cmff42-pequena.jpg" alt="">
      <h2>IP1-CMFF42</h2>
    </div>
    <div><img src="img/slidervertical/combilift542-pequena.jpg" alt="">
      <h2>COMBILIFT 542</h2>
    </div>
    <div><img src="img/slidervertical/combilift543-pequena.jpg" alt="">
      <h2>COMBILIFT 543</h2>
    </div>
    <div><img src="img/slidervertical/combilift551-pequena.jpg" alt="">
      <h2>COMBILIFT 541</h2>
    </div>
    <div><img src="img/slidervertical/combparker556-pequena.jpg" alt="">
      <h2>COMBIPARKER 556</h2>
    </div>
    <div><img src="img/slidervertical/hmt-pequena.jpg" alt="">
      <h2>IP1-HMT V07</h2>
    </div>
    <div><img src="img/slidervertical/ip1ms-pequena.jpg" alt="">
      <h2>PARKLIFT IP1 MS</h2>
    </div>
    <div><img src="img/slidervertical/levelparker-pequena.jpg" alt="">
      <h2>LEVELPARKER</h2>
    </div>
    <div><img src="img/slidervertical/multiparker-pequena.jpg" alt="">
      <h2>PARKLIFT 440</h2>
    </div>
    <div><img src="img/slidervertical/parklift340-pequena.jpg" alt="">
      <h2>PARKLIFT 340</h2>
    </div>
    <div><img src="img/slidervertical/parklift401-pequena.jpg" alt="">
      <h2>PARKLIFT 401</h2>
    </div>
    <div><img src="img/slidervertical/parklift402-pequena.jpg" alt="">
      <h2>PARKLIFT 402</h2>
    </div>
    <div><img src="img/slidervertical/parklift411-pequena.jpg" alt="">
      <h2>PARKLIFT 411</h2>
    </div>
    <div><img src="img/slidervertical/parklift440-pequena.jpg" alt="">
      <h2>PARKLIFT 440</h2>
    </div>
    <div><img src="img/slidervertical/parklift461-pequena.jpg" alt="">
      <h2>PARKLIFT 461</h2>
    </div>
    <div><img src="img/slidervertical/parksafe-pequena.jpg" alt="">
      <h2>PARKSAFE</h2>
    </div>
    <div><img src="img/slidervertical/plataformarotativa-pequena.jpg" alt="">
      <h2>PLATAFORMA ROTATIVA</h2>
    </div>
    <div><img src="img/slidervertical/slimparker557-pequena.jpg" alt="">
      <h2>SLIMPARKER 557</h2>
    </div>
  </div>
  <button id="bottom-button" type="button" class="bottom-arrow fa fa-arrow-down slide-button"></button>
</div>

编辑：它是固定的，我在setVertical函数的内部代码上方添加了几行：

if ($('.multiple-items').hasClass('slick-initialized')) {
        $('.multiple-items').slick('destroy');
    }

我还删除了旧版本的JQuery，我有两个不同版本的脚本。

Answer 1

你可以试试：

  $(document).ready(function() {

  if ($('.multiple-items').hasClass('slick-initialized')) {
     $('.multiple-items').slick('destroy');
  }

  // Slick carousel
  setVertical();

  $(window).resize(function() {
    setVertical();
   });
});

代码在函数内部时不运行

1 个答案: