Javascript 光滑转盘-相互冲突的过滤器功能相互中断（响应）

我有一个使用滑溜转盘的网站模型栏，桌面上的多个过滤器由一个按钮控制，平板电脑/手机上的多个过滤器由下拉菜单控制。它们彼此独立工作，但如果我在桌面上选择一个过滤器，然后缩小窗口并选择另一个过滤器滑块，则会中断或因为没有响应

我有两个独立的函数用于每个过滤器选择器，理想情况下，如果可以将它们组合在一起，这将是最好的，但我的javascript技能并没有那么好，我已经花了太长时间来处理这个问题，并且已经正式认输了。任何帮助都将不胜感激，请不要过于苛刻地评判我的代码

HTML

所有车辆
汽车
小型货车及；卡车
立交桥及；越野车
混合动力车及；电动汽车

所有车辆
汽车
小型货车及；卡车
立交桥及；越野车
混合动力车及；电动汽车
2015雅力士
$14845 msrp |美国东部时间30/37。mpg
2016花冠

$17230 msrp |美国东部时间28/37。mpg
2016年凯美瑞

$23070 msrp |美国东部标准时间25/35。mpg
2015年阿瓦隆

$32285 msrp |美国东部时间21/31。mpg
2015年锡耶纳

美国东部标准时间18/25日，msrp为28700美元。mpg
2015塔科马

美国东部标准时间21/25，20965美元。mpg
2016苔原
美国东部标准时间15/19日28640美元。mpg
2015 Rav-4
美国东部标准时间24/31日，23680美元。mpg

2015王子

美国东部标准时间20/26日29065美元。mpg
2015 Highlander
$29765 msrp |美国东部标准时间20/25。mpg
2016年4Runner

美国东部时间17/22。mpg

2016红杉

$44965 msrp |美国东部时间13/17。mpg
2015陆地巡洋舰

$80155 msrp |美国东部时间13/18。mpg
2016年凯美瑞混合动力车

$26790 msrp |美国东部时间43/39。mpg
2015年阿瓦隆混合动力车

$36470 msrp |美国东部时间40/39。mpg
2015 Highlander混合动力车
美国东部标准时间27/28日47850美元。mpg
2015普锐斯

美国东部标准价24200美元。mpg
2015年普锐斯C

$19540 msrp |美国东部时间53/46。mpg
2015普锐斯插电式混合动力车

$29990 msrp |美国环保署东部标准。95 Ev模式/50混合模式
2016年普锐斯V

美国东部标准价26675美元。mpg

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");

});

//车辆滚动条
$（'.model container'）.slick({
幻灯片放映：4，
prevArrow:$（“.veh pagenation#slickPrev”），
下一行：$（'veh pagenation#slickNext'），
响应：[
{
断点：1020，
设置：{
幻灯片放映：3，
箭头：错，
}
},
{
断点：767，
设置：{
幻灯片放映：1，
箭头：错，
}
}
]
});
var=false；
$（“.vehicle type selector select”）.change（函数（）{
if（$（“.vehicle type selector span.active”）.长度）{
元（“。车辆
    //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");

});