使用MixItUp在一个网格中进行多个排序

Multiple Sorts in One Grid with MixItUp

本文关键字：排序网格 MixItUp 使用一个更新时间：2024-05-16

使用MixItUp框架，我试图允许用户对主网格中的各个网格执行数据排序="随机"。从本质上讲，我希望对每个小块都有一个"Shuffle"控件，而不是一个将所有块混合在一起的排序控件。

<ul>
<a href="#" class="sort" data-sort="random">Shuffle</a>
</ul>
<ul id="Grid">
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
</ul>

这很难解释，所以这里有一把小提琴来帮助形象化：http://jsfiddle.net/kyleclay/F4xAx/

还有另一个指向MixItUp文档网站的链接：http://mixitup.io/

我也是一个在SO上发帖的新手，我刚刚创建了我的第一把小提琴，所以如果你需要我解释更多或做一些不同的事情，请告诉我。提前谢谢。

好吧，我想明白了。我必须为每个块设置单独的#网格元素，然后为每个#网格元素提供自己的sortSelector。以下是它的总体外观：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
<script src="jquery.js"></script>
<script src="jquery.mixitup.js"></script>
<script type="text/javascript">
    $(function(){
        $('#Grid1').mixitup({
            sortSelector: '.shuffle1',
        })
            $('#Grid2').mixitup({
            sortSelector: '.shuffle2',
        });
    }); 
</script>
</head>
<body>
<ul>
    <a href="#" class="shuffle1" data-sort="random">Randomize</a>
    <a href="#" class="shuffle2" data-sort="random">Randomize</a>
</ul>
<ul id="Grid1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    ...
</ul>
<ul id="Grid2">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    ...
</ul>
</body>

如果有人愿意的话，我已经更新了小提琴以供将来参考：http://jsfiddle.net/kyleclay/F4xAx/