Javascript jQuery插件出现问题'；jquery.shuffle.js'；整理_Javascript_Jquery_Jquery Isotope

Javascript jQuery插件出现问题'；jquery.shuffle.js'；整理

javascript jquery

Javascript jQuery插件出现问题'；jquery.shuffle.js'；整理,javascript,jquery,jquery-isotope,Javascript,Jquery,Jquery Isotope,我正在尝试使用一个名为shuffle.js的jQuery插件，该插件的工作原理与同位素类似——它可以在页面上的div之间来回移动。它创造了一个相当整洁的效果。（见附件）我无法把它分类。我研究过这些文件，可以发现我做错了什么。测试页面如下：当您更改第一行上方的下拉菜单时，应该会发生排序 <!doctype html> <head>  <style> body { font-family:aria

我正在尝试使用一个名为shuffle.js的jQuery插件，该插件的工作原理与同位素类似——它可以在页面上的div之间来回移动。它创造了一个相当整洁的效果。（见附件）

我无法把它分类。我研究过这些文件，可以发现我做错了什么。测试页面如下：

当您更改第一行上方的下拉菜单时，应该会发生排序

 <!doctype html>
 <head>

<!-- css -->
<style>
    body {
    font-family:arial;
    }

    #container {width: 960px; margin: 0 auto;}

    /* grid */
    #grid {clear: both; position: relative}
    .item {width: 75px; height: 155px; background: #EEEEEE;font-size: 10px;margin-bottom:10px; text-align: center;}

    .item img {
    width:75px;
    }

    .last_name {
    display:none;

    }

</style>

<!-- javascript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="jquery.shuffle.js"></script>

<script>
    $(document).ready(function() {

        /* initialize shuffle plugin */
        var $grid = $('#grid');

        $grid.shuffle({
            itemSelector: '.item', // the selector for the items in the grid
            gutterWidth: 10
        });


        // Sorting options
        $('.sort-options').on('change', function() {
         var sort = this.value,
             opts = {};

         // We're given the item wrapped in jQuery
         if ( sort === 'data-party' ) {
            opts = {
             reverse: true,
             by: function($el) {
                return $el.data('data-party');
             }
            };
         } else if ( sort === 'data-district' ) {
            opts = {
             by: function($el) {
                return $el.data('data-district');
             }
            };
         } else if ( sort === 'data-last_name' ) {
            opts = {
             by: function($el) {
                return $el.data('data-last_name');
             }
            };
         }

         // Filter items
         $grid.shuffle('sort', opts);
        });


    });
</script>

 </head>

 <body>

<!-- #container -->
<div id="container">

    <select class="sort-options">
     <option value="">Default</option>
     <option value="data-district">District</option>
     <option value="data-last_name">Last name</option>
     <option value="data-party">Party</option>
    </select>

   <!-- just show two items. Actual test page has about 60 -->

        <div id="grid">
            <div data-groups='["photography"]' class="item dem" data-party="dem" data-last_name="Abney" data-district="73">
               <img src="http://res.providencejournal.com/politics/assets/images/house-senate-thumbs/rep_marvin_l_abney.jpg"><br>
               <div class="name">Rep. Marvin L. Abney</div>
               <div class="last_name">Abney</div>
               <span class="party">(D-</span><span class="district">73)</span>
            </div>
            <div data-groups='["photography"]' class="item dem" data-party="dem" data-last_name="Ackerman" data-district="45">
               <img src="http://res.providencejournal.com/politics/assets/images/house-senate-thumbs/rep_mia_a_ackerman.jpg"><br>
               <div class="name">Rep. Mia A. Ackerman</div>
               <div class="last_name">Ackerman</div>
               <span class="party">(D-</span><span class="district">45)</span>
            </div>
        </div>
</div>
<!-- /#container -->

</body>

</html>


身体{
字体系列：arial；
}
#容器{宽度：960px；边距：0自动；}
/*网格*/
#网格{清除：两者；位置：相对}
.项目{宽度：75px；高度：155px；背景：#EEEEEE；字体大小：10px；页边距底部：10px；文本对齐：中间；}
.项目img{
宽度：75px；
}
.姓{
显示：无；
}
$（文档）.ready（函数（）{
/*初始化洗牌插件*/
var$grid=$（“#grid”）；
$grid.shuffle({
itemSelector:'.item'，//网格中项目的选择器
排水沟宽度：10
});
//排序选项
$（'.sort options'）。在（'change'，function（）上{
var sort=this.value，
opts={}；
//我们得到了用jQuery包装的项
如果（排序==‘数据方’）{
选项={
相反：是的，
作者：职能部门（$el）{
返回$el.data（“数据方”）；
}
};
}else if（排序===‘数据区’）{
选项={
作者：职能部门（$el）{
返回$el.data（“数据区”）；
}
};
}else if（排序==='data-last_name'）{
选项={
作者：职能部门（$el）{
返回$el.data（'data-last_name'）；
}
};
}
//过滤项
$grid.shuffle（'sort'，opts）；
});
});
违约
地区
姓
聚会


众议员马文·艾布尼
艾布尼
（D-73）


众议员米娅·阿克曼
阿克曼
（D-45）

Firebug表示事件正在触发，但div不移动。任何帮助都将不胜感激

不知道是否相关，但在排序函数中不需要添加'data-'前缀，尽管div元素上需要它