我有一个使用光滑轮播的网站的模型栏，桌面上有多个过滤器，由平板电脑/手机控制，由下拉控制。它们彼此独立工作但如果我在桌面上选择一个过滤器然后缩小窗口并选择不同的过滤器滑块或因为没有响应。
我有两个单独的函数用于每个过滤器选择器，理想情况下，如果它们可以组合最好但我的javascript技能不是那么好，我已经摆弄了这个有点太长了现在已经正式抛出毛巾。任何帮助将不胜感激，请不要过于严厉地判断我的代码
HTML
<!--=======Vehicle Scroller Section=======-->
<div class="scroller-container">
<div class="wrapper row vehicle-type-selector">
<div class="show-for-medium-up">
<ul class="columns column-1 large-12 medium-12 small-12">
<span id="all-vehicles" class="active"><li>All Vehicles</li></span>
<span id="car"><li>Cars</li></span>
<span id="truck"><li>Minivans & Trucks</li></span>
<span id="suv"><li>Crossovers & SUVs</li></span>
<span id="hybrid"><li>Hybrids & EVs</li></span>
</ul>
</div>
<select class="columns column-2 large-12 medium-12 small-12 show-for-small-only">
<option class="all-vehicles">All Vehicles</option>
<option class="car">Cars</option>
<option class="truck">Minivans & Trucks</option>
<option class="suv">Crossovers & SUVs</option>
<option class="hybrid">Hybrids & EVs</option>
</select>
</div>
<div class="vehicle-scroller">
<div class="wrapper row">
<div class="veh-pagenation">
<span id="slickPrev" class="prev"><i class="fa fa-chevron-circle-left"></i></span>
<span id="slickNext" class="next"><i class="fa fa-chevron-circle-right"></i></span>
</div>
<div class="model-container">
<div class="all-vehicles car">
<span class="veh-container">
<div class="veh-thumb model-1"></div>
<p class="model-name">2015 <span class="bold">Yaris</span></p>
<p class="mpg"><span class="bold">$14,845</span> msrp | <span class="bold">30/37</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles car">
<span class="veh-container">
<div class="veh-thumb model-2"></div>
<p class="model-name">2016 <span class="bold">Corolla</span></p>
<p class="mpg"><span class="bold">$17,230</span> msrp | <span class="bold">28/37</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles car">
<span class="veh-container ">
<div class="veh-thumb model-3"></div>
<p class="model-name">2016 <span class="bold">Camry</span></p>
<p class="mpg"><span class="bold">$23,070</span> msrp | <span class="bold">25/35</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles car">
<span class="veh-container">
<div class="veh-thumb model-4"></div>
<p class="model-name">2015 <span class="bold">Avalon</span></p>
<p class="mpg"><span class="bold">$32,285</span> msrp | <span class="bold">21/31</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles truck">
<span class="veh-container">
<div class="veh-thumb model-5"></div>
<p class="model-name">2015 <span class="bold">Sienna</span></p>
<p class="mpg"><span class="bold">$28,700</span> msrp | <span class="bold">18/25</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles truck">
<span class="veh-container">
<div class="veh-thumb model-6"></div>
<p class="model-name">2015 <span class="bold">Tacoma</span></p>
<p class="mpg"><span class="bold">$20,965</span> msrp | <span class="bold">21/25</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles truck">
<span class="veh-container">
<div class="veh-thumb model-7"></div>
<p class="model-name">2016 <span class="bold">Tundra</span></p>
<p class="mpg"><span class="bold">$28,640</span> msrp | <span class="bold">15/19</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles suv">
<span class="veh-container">
<div class="veh-thumb model-8"></div>
<p class="model-name">2015 <span class="bold">Rav-4</span></p>
<p class="mpg"><span class="bold">$23,680</span> msrp | <span class="bold">24/31</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles suv">
<span class="veh-container">
<div class="veh-thumb model-9"></div>
<p class="model-name">2015 <span class="bold">Venza</span></p>
<p class="mpg"><span class="bold">$29,065</span> msrp | <span class="bold">20/26</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles suv">
<span class="veh-container">
<div class="veh-thumb model-10"></div>
<p class="model-name">2015 <span class="bold">Highlander</span></p>
<p class="mpg"><span class="bold">$29,765</span> msrp | <span class="bold">20/25</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles suv">
<span class="veh-container">
<div class="veh-thumb model-11"></div>
<p class="model-name">2016 <span class="bold">4Runner</span></p>
<p class="mpg"><span class="bold">$33,510</span> msrp | <span class="bold">17/22</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles suv">
<span class="veh-container">
<div class="veh-thumb model-12"></div>
<p class="model-name">2016 <span class="bold">Sequoia</span></p>
<p class="mpg"><span class="bold">$44,965</span> msrp | <span class="bold">13/17</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles suv">
<span class="veh-container">
<div class="veh-thumb model-13"></div>
<p class="model-name">2015 <span class="bold">Land Cruiser</span></p>
<p class="mpg"><span class="bold">$80,155</span> msrp | <span class="bold">13/18</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles hybrid">
<span class="veh-container">
<div class="veh-thumb model-14"></div>
<p class="model-name">2016 <span class="bold">Camry Hybrid</span></p>
<p class="mpg"><span class="bold">$26,790</span> msrp | <span class="bold">43/39</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles hybrid">
<span class="veh-container">
<div class="veh-thumb model-15"></div>
<p class="model-name">2015 <span class="bold">Avalon Hybrid</span></p>
<p class="mpg"><span class="bold">$36,470</span> msrp | <span class="bold">40/39</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles hybrid">
<span class="veh-container">
<div class="veh-thumb model-16"></div>
<p class="model-name">2015 <span class="bold">Highlander Hybrid</span></p>
<p class="mpg"><span class="bold">$47,850</span> msrp | <span class="bold">27/28</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles hybrid">
<span class="veh-container">
<div class="veh-thumb model-17"></div>
<p class="model-name">2015 <span class="bold">Prius</span></p>
<p class="mpg"><span class="bold">$24,200</span> msrp | <span class="bold">51/48</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles hybrid">
<span class="veh-container">
<div class="veh-thumb model-18"></div>
<p class="model-name">2015 <span class="bold">Prius C</span></p>
<p class="mpg"><span class="bold">$19,540</span> msrp | <span class="bold">53/46</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles hybrid">
<span class="veh-container">
<div class="veh-thumb model-19"></div>
<p class="model-name">2015 <span class="bold">Prius Plug-In Hybrid</span></p>
<p class="mpg"><span class="bold">$29,990</span> msrp | EPA est. <span class="bold">95 Ev Mode/50 hybrid mode</span></p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="all-vehicles hybrid">
<span class="veh-container">
<div class="veh-thumb model-20"></div>
<p class="model-name">2016 <span class="bold">Prius V</span></p>
<p class="mpg"><span class="bold">$26,675</span> msrp | <span class="bold">44/40</span> est. mpg</p>
<a href="#" class="button">View Details <i class="fa fa-chevron-right"></i></a>
</span>
</div>
</div>
</div>
</div>
</div>
的Javascript
//vehicle scroller
$('.model-container').slick({
slidesToShow: 4,
prevArrow: $('.veh-pagenation #slickPrev'),
nextArrow: $('.veh-pagenation #slickNext'),
responsive: [
{
breakpoint: 1020,
settings: {
slidesToShow: 3,
arrows: false,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
arrows: false,
}
}
]
});
var filtered = false;
$(".vehicle-type-selector select").change(function() {
if ($(".vehicle-type-selector span.active").length) {
$(".vehicle-type-selector span.active").removeClass("active");
var filtered = true;
} else {
var filtered = false;
}
var filtername = $("option:selected").attr('class');
if (filtered === false) {
$('.model-container').slick('slickUnfilter');
$('.model-container').slick('slickFilter', '.' + filtername);
} else {
$('.model-container').slick('slickUnfilter');
$('.model-container').slick('slickFilter', '.' + filtername);
$('.model-container').slick('slickGoTo', 0);
filtered = false;
}
if ($(".vehicle-type-selector span.active").length) {
$(".vehicle-type-selector span.active").removeClass("active");
}
if ($(".vehicle-type-selector option:selected").length) {
$("option:selected").removeAttr("selected");
}
$('.vehicle-type-selector select').find('option.' + filtername).attr('selected','selected');
$(".vehicle-type-selector span#" + filtername).toggleClass("active");
});
$(".vehicle-type-selector span").on('click', function(){
if ($(".vehicle-type-selector option:selected").length) {
$("option:selected").removeAttr("selected");
var filtered = true;
} else {
var filtered = false;
}
var filtername = $(this).attr('id');
if (filtered === false) {
$('.model-container').slick('slickUnfilter');
$('.model-container').slick('slickFilter', '.' + filtername);
} else {
$('.model-container').slick('slickUnfilter');
$('.model-container').slick('slickFilter', '.' + filtername);
$('.model-container').slick('slickGoTo', 0);
filtered = false;
}
if ($(".vehicle-type-selector span.active").length) {
$(".vehicle-type-selector span.active").removeClass("active");
}
$(this).toggleClass("active");
$('.vehicle-type-selector select').find('option.' + filtername).attr('selected','selected');
if($(".model-container .slick-track").children().length < 5) {
$(".veh-pagenation").hide();
} else {
$(".veh-pagenation").show();
}
console.log("arrows");
});
这里是＆＃34;工作＆＃34;模型http://schottman-toyotadesign.schottmandesign.com