QA@IT
«質問へ戻る

質問を投稿

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

下記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>

よろしくお願いします。

下記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>
```


よろしくお願いします。