同位素过滤问题答案

【问题标题】：Issues with Isotope filtering同位素过滤问题
【发布时间】：2013-04-13 10:15:30
【问题描述】：

我正在使用此处的示例测试同位素过滤：http://jsfiddle.net/huxnL/

但是，我的同位素过滤不起作用。我复制并粘贴了示例中的代码。这是我的例子：http://jsfiddle.net/74nYh/

谁能帮帮我？谢谢！

我的代码如下：

脚本 -->

$(function () {

var $container = $('#container'),
    $select = $('#filters select');

$container.isotope({
    itemSelector: '.item'
});

$select.change(function () {
    var filters = $(this).val();;
    $container.isotope({
        filter: filters
    });
}); });

CSS -->

body {
font-family:'Helvetica Neue', Arial, sans-serif;}

#container {
border: 1px solid;
padding: 3px;
height:250px;}

.item {
width: 70px;
height: 70px;
margin: 3px;
float: left;}

.red {
background: red;}

.blue {
background: blue;}

.green {
background: green;}

.yellow {
background: yellow;}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;}

/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;}

 .isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;}

 .isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;}

 /**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-      item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;}

/* End: Recommended Isotope styles */

内容 -->

<div id="filters">
<select>
    <option value="*">All</option>
    <option value=".red">Red</option>
    <option value=".green">Green</option>
    <option value=".blue">Blue</option>
    <option value=".yellow">Yellow</option>
</select>
</div>
<div id="container">
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
</div>

【问题讨论】：

标签： jquery-isotope

【解决方案1】：

我也是新手，但我相信您忘记附加您的 Jquery 库资源。您需要授予 fiddle 访问 Jquery、Jquery UI 和 Isotope 的权限。

【讨论】：