jQuery插件'jQuery .shuffle.js'执行排序

Trouble making jQuery plugin 'jquery.shuffle.js' perform a sort

本文关键字：jQuery 排序 执行 shuffle 插件 js      更新时间：2023-09-26

我正在尝试使用一个名为shuffle.js的jQuery插件，它应该与同位素工作相似-它可以在页面上shufflediv。它创造了一个非常整洁的效果。(参见http://vestride.github.io/Shuffle/)

我不能让它排序。我研究了医生，可以找到我做错的地方。测试页面在这里:http://res.providencejournal.com/politics/assets/pages/general-assembly/shuffle.htm

排序应该发生在你对第一行上方的下拉菜单进行更改时。

 <!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>

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

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

相关文章：