代码在函数内部时不运行

Posted 2023-05-07

【中文标题】代码在函数内部时不运行

【英文标题】：Code doesn't run when it's inside a function

【发布时间】：2020-05-04 11:17:27

【问题描述】：

代码运行我的“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" >
      <h2>IP1-CMFF42</h2>
    </div>
    <div><img src="img/slidervertical/combilift542-pequena.jpg" >
      <h2>COMBILIFT 542</h2>
    </div>
    <div><img src="img/slidervertical/combilift543-pequena.jpg" >
      <h2>COMBILIFT 543</h2>
    </div>
    <div><img src="img/slidervertical/combilift551-pequena.jpg" >
      <h2>COMBILIFT 541</h2>
    </div>
    <div><img src="img/slidervertical/combparker556-pequena.jpg" >
      <h2>COMBIPARKER 556</h2>
    </div>
    <div><img src="img/slidervertical/hmt-pequena.jpg" >
      <h2>IP1-HMT V07</h2>
    </div>
    <div><img src="img/slidervertical/ip1ms-pequena.jpg" >
      <h2>PARKLIFT IP1 MS</h2>
    </div>
    <div><img src="img/slidervertical/levelparker-pequena.jpg" >
      <h2>LEVELPARKER</h2>
    </div>
    <div><img src="img/slidervertical/multiparker-pequena.jpg" >
      <h2>PARKLIFT 440</h2>
    </div>
    <div><img src="img/slidervertical/parklift340-pequena.jpg" >
      <h2>PARKLIFT 340</h2>
    </div>
    <div><img src="img/slidervertical/parklift401-pequena.jpg" >
      <h2>PARKLIFT 401</h2>
    </div>
    <div><img src="img/slidervertical/parklift402-pequena.jpg" >
      <h2>PARKLIFT 402</h2>
    </div>
    <div><img src="img/slidervertical/parklift411-pequena.jpg" >
      <h2>PARKLIFT 411</h2>
    </div>
    <div><img src="img/slidervertical/parklift440-pequena.jpg" >
      <h2>PARKLIFT 440</h2>
    </div>
    <div><img src="img/slidervertical/parklift461-pequena.jpg" >
      <h2>PARKLIFT 461</h2>
    </div>
    <div><img src="img/slidervertical/parksafe-pequena.jpg" >
      <h2>PARKSAFE</h2>
    </div>
    <div><img src="img/slidervertical/plataformarotativa-pequena.jpg" >
      <h2>PLATAFORMA ROTATIVA</h2>
    </div>
    <div><img src="img/slidervertical/slimparker557-pequena.jpg" >
      <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，我有两个不同版本的脚本。

【问题讨论】：

您的浏览器控制台是否出现错误？如果有，它们是什么？

@mplungjan setCarousel 和 setPageNav 是有效代码的一部分，我删除了它们，因为它们与这篇文章无关，至少我认为它们无关紧要。

@Amy “TypeError: $(...).slick is not a function”，我收到一个说“Error: NetworkError when trying to fetch resource。”

我在您的代码中看不到任何提取。第一个问题是缺少依赖项。所以我猜测依赖加载失败。

看起来您使用的 slick 插件具有响应性选项，我不确定您何时调用 .slick(...) 它正在创建一个新实例。在“setVerticle”方法的顶部，尝试使用以下命令销毁实例： $('.multiple-items').slick('unslick');

【参考方案1】：

你可以试试：

  $(document).ready(function() 

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

  // Slick carousel
  setVertical();

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