Код не запускается, когда он внутри функции - PullRequest
Новая
       10

Код не запускается, когда он внутри функции

6 голосов
/ 17 января 2020

Код запускает мои слова «если», «иначе, если» и «еще», если я оставляю это как есть, вне функции, проблема в том, что он должен обновляться при изменении ширины моего браузера, так что мой сайт полностью отзывчив, но он обновляется только когда я обновляю sh страницу.

Когда я помещаю его в функцию и в основном использую те же логи c, что и другие, на которые влияет ширина браузера используйте, это просто не работает.

Я новичок, я не знаю, показываю ли я достаточно кода, но вот оно: 

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, у меня были скрипты для двух разных версий.

...