我正在使用此处的示例测试同位素过滤: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>