使用 MixItUp jquery 插件从网格视图切换到列表视图

Question

我在我的网站上使用 jquery MixItUp 来显示图像和视频。 它在网格视图中工作正常，过滤也可以，但我不明白如何通过单击按钮将视图从网格切换到列表，找不到解决方案...

这是我的html：

<div class="bloc_1_medias">
    <ul id="Grid">
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix videos"><iframe width="233" height="133" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix videos"><iframe width="233" height="133" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix videos"><iframe width="233" height="133" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
        <li class="mix videos"><iframe width="233" height="133" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe></li>
        <li class="mix photos"><img src="http://eofdreams.com/data_images/dreams/image/image-01.jpg" class="photo_medias"></li>
   </ul>
</div>

<span class="medias_filtre_titre">Filter by : </span>
<span class="filter" data-filter="photos">PHOTOS</span> | 
<span class="filter" data-filter="videos">VIDEOS</span> | 
<span class="filter" data-filter="photos videos">DATES</span>

<div class="switch_medias">
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/grid.jpg" style="vertical-align:middle;background-color:blue;padding:5px" id="GoGrid" class="button.layout"/> | 
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/list.jpg" style="vertical-align:middle;background-color:blue;padding:5px" id="GoList" class="button.layout"/>
</div>

我试图在单击“list.jpg”图像时切换到列表，并在单击“grid.jpg”时切换到网格。

我不知道在我的 Js 和 Css 中添加什么。

这是我的 JS：

$(function(){


  $('#Grid').mixitup()({

    layoutMode: 'grid',
    targetDisplayGrid: 'inline-block',
    targetDisplayList: 'block',
  });

});

还有一个 jsFiddle：

http://jsfiddle.net/aaWLJ/

Answer 1

您的 jQuery 中有一些语法错误。我已经更正了它们，您还可以在this FIDDLE 上看到“视图切换”的实现。

$(function(){

  $('#Grid').mixitup({

    layoutMode: 'grid',
    listClass: 'list',
    gridClass: 'grid',
    targetDisplayGrid: 'inline-block',
    targetDisplayList: 'block'
  });

    $('img#GoList').on('click', function(){
        $('#Grid').mixitup('toList');
    });

    $('img#GoGrid').on('click', function(){
        $('#Grid').mixitup('toGrid');
    });

});