gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:41:43 27 4
gpt4 key购买 nike

代码运行我的“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,我有两个不同版本的脚本。

最佳答案

你可以试试:

  $(document).ready(function() {

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

// Slick carousel
setVertical();

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

关于jquery - 代码在函数内部时不会运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59789537/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com