Question

使用MixItUp框架，我试图允许用户对主网格中的各个网格执行data-sort =“random”。从本质上讲，我希望为每个小块提供一个“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上发帖，我刚刚创建了我的第一个小提琴，所以如果你需要我解释更多或做一些不同的事情，请告诉我。提前谢谢。

Answer 1

好吧我明白了。我必须为每个块设置单独的#grid元素，然后为每个#grid元素提供自己的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/

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

1 个答案: