Question

我试图使用名为shuffle.js的jQuery插件，该插件应该与Isotope类似 - 它可以在页面上的div之间进行混乱。它创造了一个非常整洁的效果。（见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不会移动。任何帮助将不胜感激！

Answer 1

不知道是否相关，但在排序功能中，您不需要添加“数据” - ＆＃39;前缀，虽然在div元素上是必需的。

麻烦制作jQuery插件＆＃39; jquery.shuffle.js＆＃39;进行排序

1 个答案: