QA@IT

ソート、フィルタリングを行うjQueryプラグインが動かない

3607 PV

下記URLの中盤辺りにあるShuffle.jsのやり方を参考にしたところプレビューで動作しません。
どうか間違っているところを教えて下さい。

参考サイト
http://wald-grun.biz/jquery/5164/
ソースを載せておきます。

<!DOCTYPE html>
<html lang="ja">
<head><script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="jquery.shuffle.min.js"></script>
<meta charset="UTF-8">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 17.0.15.0 for Windows">
<title></title>
<link rel="stylesheet" href="Shuffle.css" type="text/css">
</head>
<body>
<div style="width : 648px;height : 385px;top : 50px;left : 50px;
    position : absolute;
    z-index : 1;
    visibility : visible;
" id="Layer1"><select class="sort-options">
  <option value="">Default</option>
  <option value="title">Title</option>
  <option value="date-created">Date Created</option>
</select>

<ul id="btn">
    <li data-group="all" class="active alpha">ALL</li>
    <li data-group="group1" class="alpha">group1</li>
    <li data-group="group2" class="alpha">group2</li>
    <li data-group="group3" class="alpha">group3</li>
    <li data-group="group1 group3" class="alpha">group1&amp;3</li>
</ul>


<ul id="grid" class="row-fluid">
  <li  class="span3 picture-item" data-groups='["group1"]' data-date-created="2013-02-01" data-title="1-1">
    <img src="http://placehold.jp/3d4070/ffffff/150x100.png?text=1-1" height="100" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group2"]' data-date-created="2013-07-01" data-title="2-1">
    <img src="http://placehold.jp/3d705e/ffffff/150x300.png?text=2-1" height="300" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group3"]' data-date-created="2013-04-01" data-title="3-1">
    <img src="http://placehold.jp/703d61/ffffff/150x300.png?text=3-1" height="300" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group1"]' data-date-created="2013-02-01" data-title="1-2">
    <img src="http://placehold.jp/3d4070/ffffff/150x300.png?text=1-2" height="300" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group2"]' data-date-created="2013-07-01" data-title="2-2">
    <img src="http://placehold.jp/3d705e/ffffff/150x200.png?text=2-2" height="200" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group3"]' data-date-created="2013-04-01" data-title="3-2">
    <img src="http://placehold.jp/703d61/ffffff/150x100.png?text=3-2" height="100" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group1"]' data-date-created="2013-02-01" data-title="1-3">
    <img src="http://placehold.jp/3d4070/ffffff/150x200.png?text=1-3" height="200" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group2"]' data-date-created="2013-07-01" data-title="2-3">
    <img src="http://placehold.jp/3d705e/ffffff/150x100.png?text=2-3" height="100" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group3"]' data-date-created="2013-04-01" data-title="3-3">
    <img src="http://placehold.jp/703d61/ffffff/150x200.png?text=3-3" height="200" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group1"]' data-date-created="2013-02-01" data-title="1-4">
    <img src="http://placehold.jp/3d4070/ffffff/150x400.png?text=1-4" height="400" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group2"]' data-date-created="2013-07-01" data-title="2-4">
    <img src="http://placehold.jp/3d705e/ffffff/150x400.png?text=2-4" height="400" width="150" />
  </li>
  <li  class="span3 picture-item" data-groups='["group3"]' data-date-created="2013-04-01" data-title="3-4">
    <img src="http://placehold.jp/703d61/ffffff/150x100.png?text=3-4" height="100" width="150" />
  </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.shuffle.min.js"></script>
<script>
$(document).ready(function() {
    var $grid = $('#grid');

    $grid.shuffle({
        itemSelector: '.picture-item',
        group: 'all',
        speed: 300,
        easing: 'ease-in-out'
    });

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

        // We're given the element wrapped in jQuery
        if ( sort === 'date-created' ) {
            opts = {
                reverse: true,
                    by: function($el) {
                    return $el.data('date-created');
                }
            };
        } else if ( sort === 'title' ) {
            opts = {
                by: function($el) {
                    return $el.data('title').toLowerCase();
                }
            };
        }

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

    });


    $('#btn li').on('click', function() {
        var $this = $(this),
        group = $this.data('group');

        $('#btn .active').removeClass('active');
        $this.addClass('active');

        if(group != 'all'){
            $grid.shuffle('shuffle', function($el, shuffle) {
                return group.indexOf($el.data('groups')) > -1
            });
        }else{
                $grid.shuffle( 'shuffle', 'all' );
        }

    });
});</div>
</body>
</html></script></div>
</body>
</html>

以下CSSです

<style>
img{
    vertical-align:bottom;
    border:1px solid #BBBBBB;
    box-sizing:border-box;
}
ul{
    margin:0;
    padding:0;
    list-style-type:none;
}
li{
    margin:0;
    padding:0;
}
#btn{
    overflow:hidden;
    margin:10px 0;
}
#btn li{
    padding:10px;
    margin-right:5px;
    float:left;
    cursor:pointer;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}
#btn li.active{
    background-color:#D4D4C3;
}
</style>

よろしくお願いします。

  • JavaScript はブラウザ依存と言うことはご存知ですか? 使っているブラウザは何かという情報が質問文には見当たらないようですが・・・ -
  • お返事が遅くなってしまい申し訳ありません。ブラウザはIE11です。
    JavaScript はブラウザ依存ということは何となくは理解しているつもりです…
    -
  • 質問に回答いただいてなんですが、もう少しご自分で問題のある範囲・部分を絞れないでしょうか。コードを拝見すると、参考にされている記事のサンプルをほぼそのままコピペしたようですが、それが動かないからと言って、そのままここに投げたとすると、それはちょっと違うのではと思います。 -
  • パッと見、一つだけ気がついた点を言っておきます。外部スクリプトファイルの定義がダブってます。そこを直したらうまく気かどうかは不明ですが、少なくともそこは直さないとダメです。後は自分のコードとサンプルをよく見比べて自助努力で探してください。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。