因此我尝试使用同位素来过滤东西，并且它的工作......但是当我按下按钮进行过滤时，它不会将类添加到活动按钮中。＃34; .is -checked＆＃34;并从最后一个中删除它。可能只是我的一些愚蠢的语法错误。任何人都可以看到这里的错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/lightbox.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center">Portfolio</h1>
<div class="button-group filter-button-group text-center">
<button class="button is-checked" data-filter="*">All</button>
<button class="button" data-filter=".metal">Web Design</button>
<button class="button" data-filter=".transition">Photography</button>
</div>
<div class="grid">
<div class="grid-sizer col-xs-6 col-sm-4 col-md-4 col-lg-3"></div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-1.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-1.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-2.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-2.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-3.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-3.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-4.jpeg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-4.jpeg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-5.jpeg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-5.jpeg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-6.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-6.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-7.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-7.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-8.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-8.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-9.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-9.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-10.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-10.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-11.jeg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-11.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-12.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-12.jpg">
</a>
</div>
</div>
</div>
</div>
<div class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-2.jpg"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3.0.1/dist/isotope.pkgd.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/lightbox.min.js"></script>
<script>
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue }),$(window).trigger('resize.px.parallax');
});
function radioButtonGroup( buttonGroup ) {
buttonGroup.addEventListener( 'click', function( event ) {
// only work with buttons
if ( !matchesSelector( event.target, 'button' ) ) {
return;
}
buttonGroup.querySelector('.is-checked').classList.remove('is-checked');
event.target.classList.add('is-checked');
});
}
</script>
我的css
.grid-item {
margin-bottom:;
padding:5px;
}
.parallax-window{
min-height:300px;
}
.filter-button-group button{
}
.button.is-checked {
background-color: #28F;
}
答案 0 :(得分：0)
您遗漏了部分代码，您需要定义 buttonGroup ：
// change is-checked class on buttons
var buttonGroups = document.querySelectorAll('.button-group');
for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
var buttonGroup = buttonGroups[i];
radioButtonGroup( buttonGroup );
}
function radioButtonGroup( buttonGroup ) {
buttonGroup.addEventListener( 'click', function( event ) {
// only work with buttons
if ( !matchesSelector( event.target, 'button' ) ) {
return;
}
buttonGroup.querySelector('.is-checked').classList.remove('is-checked');
event.target.classList.add('is-checked');
});
}