jQuery 光滑的滑块过滤器
Posted
技术标签:
【中文标题】jQuery 光滑的滑块过滤器【英文标题】：jQuery slick slider filter 【发布时间】：2018-05-03 18:35:33 【问题描述】：我正在尝试使用包含不同电影的轮播创建响应式页面。我希望能够按流派过滤电影，并在轮播中一次只显示一个选定的流派。
我一开始尝试使用引导轮播，但似乎使用 jQuery 光滑滑块是可行的方法。 但我也读过一些人在使用 slick 和响应式设计时遇到问题。
这可能是 ja 文件中的内容，因为我会收到以下错误：
"Uncaught TypeError: $(...).slickUnfilter is not a function
at htmlButtonElement.<anonymous> (slider.js:31)
at HTMLButtonElement.dispatch (jquery-1.11.0.min.js:3)
at HTMLButtonElement.r.handle (jquery-1.11.0.min.js:3)
(anonymous) @ slider.js:31
dispatch @ jquery-1.11.0.min.js:3
r.handle @ jquery-1.11.0.min.js:3"
我的 html 文件
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/sida.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../slick/slick.css"/>
<link rel="stylesheet" tyoe="text/css" href="../slick/slick-theme.css">
<title>Sida</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body background="../images/background.jpg">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container" >
<div class="row">
<div class="col-xs-12">
<div class="movies-carousel">
<div class="item filter-Action"><img class="movies-selector" src="../images/hotfuzz.jpg" /></div>
<div class="item filter-Comedy"><img class="movies-selector" src="../images/superbad.jpg" /></div>
</div>
<div class="movie-wrapper">
<ul class="genres">
<li id="Action"><button class="btn btn-xs btn-primary movies-button">Action</button></li>
<li id="Comedy"><button class="btn btn-xs btn-primary movies-button">Comedy</button></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../slick/slick.min.js"></script>
<script type="text/javascript" src="../js/slider.js"></script>
</body>
强文本
我的 javascript
$(document).ready(function()
$('.movies-carousel').slick(
);
);
$('.movies-button').on('click', function()
var filtername = $(this).parent('li').attr('id');
var currentclass = $(this).attr('class');
if(currentclass == 'btn btn-xs btn-default movies-button')
// currently filtered, turn the others off and this on
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickFilter('.filter-' + filtername);
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
else
// is this the only currently selected movie or are they all active?
var numberactive = $('.genres').find('.btn-default').length;
if(numberactive > 0)
// toggle them all back on
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-primary movies-button');
else
// switch the others off
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickFilter('.filter-' + filtername);
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
);
谢谢
【问题讨论】：
【参考方案1】：您收到 JavaScript 错误的原因是您对各种 slick 方法的引用未正确指定。您需要使用以下格式.slick('[methodName]')。例如：
// Incorrect
$('.movies-carousel').slickUnfilter();
// Correct
$('.movies-carousel').slick('slickUnfilter');
希望下面的代码对您有所帮助。
$(document).ready(function()
$('.movies-carousel').slick();
);
$('.movies-button').on('click', function()
var filtername = $(this).parent('li').attr('id');
var currentclass = $(this).attr('class');
if (currentclass == 'btn btn-xs btn-default movies-button')
// currently filtered, turn the others off and this on
$('.movies-carousel').slick('slickUnfilter');
$('.movies-carousel').slick('slickFilter', '.filter-' + filtername);
$('.movies-carousel').slick('slickGoTo', 0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
else
// is this the only currently selected movie or are they all active?
var numberactive = $('.genres').find('.btn-default').length;
if (numberactive > 0)
// toggle them all back on
$('.movies-carousel').slick('slickUnfilter');
$('.movies-carousel').slick('slickGoTo', 0);
$('.movies-button').attr('class', 'btn btn-xs btn-primary movies-button');
else
// switch the others off
$('.movies-carousel').slick('slickUnfilter');
$('.movies-carousel').slick('slickFilter', '.filter-' + filtername);
$('.movies-carousel').slick('slickGoTo', 0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
);
【讨论】：
以上是关于jQuery 光滑的滑块过滤器的主要内容，如果未能解决你的问题，请参考以下文章