Question

我正在尝试使用jquery滑块创建可过滤的投资组合，使用easySlider和我从各种教程改编的代码。投资组合项目呈现为无序列表，并根据其css类显示或隐藏。我已经设法使这部分工作正常，但我无法弄清楚如何处理滑块。它不再显示隐藏的项目，而是继续显示以前的空白幻灯片。

任何想法如何以某种方式清除滑块功能，然后在每次滑动滤镜后重新调用它。

到目前为止，这是我的代码：

$(document).ready(function(){

    $("#slider").easySlider({
        auto: true, 
        continuous: true,
        numeric: true,
        controlsBefore: '',
        pause: 3000
    });

    $("#filter-portfolio a").click(function() {
        $('#filter-portfolio .filteredby').removeClass('filteredby');
        $(this).addClass('filteredby');

        var filterVal = $(this).text().toLowerCase().replace(' ','-');

        if(filterVal == 'both') {
                $('#slider li.hidden').removeClass('hidden');
        }
        else {
            $('#slider li').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).addClass('hidden');
                    $(this).remove();
                } else {
                    $(this).removeClass('hidden');
                    $('#slider li').appendTo('#slider ul');
                }
            });

            var count = $("#slider ul li:not('.hidden')").length -1;
            $('#controls li:not(li:lt(' + count + '))').remove();
        }
        return false;
    });
});

任何帮助都非常感谢，因为我在这里撕扯我的头发！如果我错过了任何必要的信息，请告诉我。

编辑：根据要求，以下是page in action。

的示例

谢谢，萨姆

Answer 1

这应该适合你。

<script type="text/javascript">


$(document).ready(function(){

    //Make a true copy of the UL before we mess with it
    $("#slider ul").clone().appendTo("body").addClass("hidden").attr("id", "master");

    //Set up our click functionality
    $("#filter-portfolio a").click(function() { 

        classes = $(this).attr("class"); //Get the actual value of the "class" attribute.
        classes = "#master li."+classes.replace(/[\s]/ig, ", #master li."); //Turn the class attribute into a jquery search string      
        $("#slider ul").empty();
        $(classes).clone().appendTo("#slider ul");

        //Kill off any previous sliders     
        clearTimeout($("#slider").attr("rel"));//Clear any pending animations
        $("#slider ul").attr("style", "");//Clear any styles on the slider ul element
        $("ol#controls").remove();//Remove the clickbar

        //Fire EasySlider
        $("#slider").easySlider({
            auto: true, 
            continuous: true,
            numeric: true,
            controlsBefore: '',
            pause: 500
        }); 

        return false;
    });

    //Fire off a fake click event
    $("#filter-portfolio a#startup").click();

});


</script>

</head>

<body>

    <div id="content">

        <div id="slider">

            <ul>                
                <li class="web"><img src="images/01.jpg" alt="Css Template Preview" /></li>
                <li class="web"><img src="images/02.jpg" alt="Css Template Preview" /></li>
                <li class="design"><img src="images/03.jpg" alt="Css Template Preview" /></li>
                <li class="design"><img src="images/04.jpg" alt="Css Template Preview" /></li>

                <li class="design"><img src="images/05.jpg" alt="Css Template Preview" /></li>          
            </ul>

        </div>

        <div id="filter-portfolio">

            <p>Filter portfolio by: <a href="" class="design">design</a>, <a href="" class="web">web</a>, <a href="" class="web design" id="startup">both</a>.</p>

        </div>


    </div>

</body>

请注意，我已更改了您的filter-portfolio a元素，因此它们使用的是类名而不是innerHTML。 id为startup的那个是由启动函数伪点击的那个。

现在这一点非常重要！

您需要在第199行和第208行之后将以下内容添加到easySlider.1.7.js，以使其生效。

$(obj).attr("rel", timeout);

基本上您所做的是在调用setTimeout()的任何地方，您将返回的值timeout复制到rel的{{1}}属性中。这样，我们可以在重置滑块之前执行#slider来消除任何待处理的动画。

或者您可以从here

下载修改后的clearTimeout()

希望这有帮助！

干杯，

伊恩

如何为投资组合构建可过滤的jquery滑块？

1 个答案: