代码之家 › 专栏 › 技术社区 › Carl Decks

jQuery slick滑块过滤器

carousel twitter-bootstrap html jquery

Carl Decks · 技术社区 · 7 年前

我正在尝试创建一个包含不同电影的旋转木马的响应页面。我希望能够按类型筛选电影,并在旋转木马中一次只显示一个选定的类型。

起初我尝试过使用引导旋转木马,但似乎使用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 回复 | 直到 7 年前

Kieran McClung 7 年前

您收到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');
        }
    }
});