jquery - 代码在函数内部时不会运行

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();
   });
});