混淆显示全部/无或自己选择一个

Question

此筛选器的任何用户是否知道如何更改这些设置。目前，我正在用它显示4种不同的食物菜单图片。当您向下滚动菜单部分，它当前显示所有的项目，而我希望它只显示午餐菜单和其他当你点击他们。我找到了这份文件，但我怀疑我做错了什么。

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

如果我错了，请纠正我，但这是javascript对吗？我是否为此创建了一个新的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

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

showOnLoad:"all"

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

Answer 2

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

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