与同位素过滤

问题，我在这里通过使用例如检验出同位素过滤：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>

来源

2013-04-13 reizel

我这也是新的，但我相信你忘了附加y我们的Jquery库资源。您需要将小提琴存取到Jquery，Jquery UI和Isotope。

来源

2013-04-14 05:44:20 user2278965

与同位素过滤

回答

相关问题