Question

是否有此过滤器的任何用户知道如何更改这些设置。目前我用它来显示4种不同的食物菜单图片。当您向下滚动菜单部分时，它当前显示所有项目，虽然我希望它只显示午餐菜单而另一个当你点击它们时。我找到了这个文档，但我知道我做错了什么

$('#Container').mixItUp({
    load: {
        filter: '.category-1'
    }
});

如果我错了，请纠正我，但这是正确的吗？我是否为此创建了一个新的js文件，因为我似乎无法在mixitup.js中找到这个部分

这是我的HTML

                          <section class="description_content">
    <div class="limit"> 
        <div class="container">
            <div class="row">
                <div id="w">

                    <ul id="filter-list" class="clearfix">
                        <li class="filter" data-filter="breakfast">Lunch</li>
                        <li class="filter" data-filter="special">Dinner</li>
                        <li class="filter" data-filter="desert">Diversen</li>
                        <li class="filter" data-filter="dinner">Nagerechten</li>
                    </ul><!-- @end #filter-list -->    
                    <ul class="row" id="portfolio">
                        <li class="item breakfast"><img src="images/lunch.jpg" alt="Food" >

                            <li class="item special"><img src="images/dinner.jpg" alt="Food" >

                        </li>

                        </li>

                     </ul><!-- @end #portfolio -->
                </div><!-- @end #w -->
            </div>
        </div>
    </div>  
</section>

这是我的页脚

<script type="text/javascript" src="js/jquery-1.10.2.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>      
<script type="text/javascript" src="js/jquery.mixitup.min.js" ></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

        <script type="text/javascript">
            $(function() {
                $('a[href*=#]:not([href=#])').click(function() {
                    if (location.pathname.replace(/^\//,'') ==         this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                        var target = $(this.hash);
                          target = target.length ? target : $('[name=' +     this.hash.slice(1) +']');
                    if (target.length) {
                        $('html,body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                      return false;
                    }  
                }
            });
        });

    </script>


    <script>
        $(function() {
            $( "#datepicker" ).datepicker();
        });
    </script>

    <script type="text/javascript">
        $(function(){
            $('#portfolio').mixitup({
                targetSelector: '.item',
                transitionSpeed: 450
            });
        });
    </script>

Answer 1

这是jQuery，Jquery是一个用javascript预定义的库，所以如果你想使用这段代码，你需要在页面的head部分包含jQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 2

我终于找到了答案。在.js文件中有一个部分说：

showOnLoad:"all"

只需将其更改为"none"或您要显示的图片的文件名。

mixitup show all / none或自己选择一个

2 个答案: