我有一个简单的jQuery过滤器设置。我正在尝试将活动班级重置为cat-sun,而不是cat-all。我已经更改了jQuery,以将活动类分配给cat-sun,而不是cat-all。我在某处缺少某些东西,因为它无法正常工作。
var filterActive;
function filterCategory(category) {
if (filterActive != category) {
// reset results list
$('.filter-cat-results .f-cat').removeClass('active');
// elements to be filtered
$('.filter-cat-results .f-cat')
.filter('[data-cat="' + category + '"]')
.addClass('active');
// reset active filter
filterActive = category;
$('.filtering button').removeClass('active');
}
}
$('.f-cat').addClass('active');
$('.filtering button').click(function() {
if ($(this).hasClass('cat-sun')) {
$('.filter-cat-results .f-cat').addClass('active');
filterActive = 'cat-sun';
$('.filtering button').removeClass('active');
} else {
filterCategory($(this).attr('data-cat'));
}
$(this).addClass('active');
});
button {
padding: 1em;
border: 0;
margin: 0 .5em .5em -10px;
color: #fff;
cursor: pointer;
outline: none;
}
button.cat-sun {
background: #ff4136;
}
button.cat-sun:hover {
background: #e90d00;
}
button.cat-mon {
background: #2ecc40;
}
button.cat-mon:hover {
background: #208e2c;
}
button.cat-tue {
background: #0074d9;
}
button.cat-tue:hover {
background: #004b8d;
}
button.cat-wed {
background: magenta;
}
button.cat-wed:hover {
background: darkmagenta;
}
button.cat-all {
background: #333;
}
button.cat-all:hover {
background: #0d0d0d;
}
.f-cat {
color: #fff;
padding: 1em;
border: 5px solid #fff;
}
.cat-sun {
background: #ff4136;
}
.cat-mon {
background: #2ecc40;
}
.cat-tue {
background: #0074d9;
}
.cat-wed {
background: magenta;
}
.row .col {
opacity: 0;
display: none;
}
.row .col.active {
opacity: 1;
display: block;
-webkit-animation: fadeIn 0.65s ease forwards;
animation: fadeIn 0.65s ease forwards;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<h2>jQuery Button Filtering</h2>
</div>
</div>
<div class="container filtering">
<ul class="nav nav-pills nav-filter-cat">
<li><button class="cat-all" data-cat="cat-all">All Days</button></li>
<li><button class="cat-sun active" data-cat="cat-sun">Sunday</button></li>
<li><button class="cat-mon" data-cat="cat-mon">Monday</button></li>
<li><button class="cat-tue" data-cat="cat-tue">Tuesday</button></li>
<li><button class="cat-wed" data-cat="cat-wed">Wednesday</button></li>
</ul>
<div class="row filter-cat-results">
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
</div>
</div>
您将所有“ .f cat”元素都设置为“活动”。因此,默认情况下会显示所有元素。而且我也不明白您的点击处理程序正在试图实现什么。这是修改后的代码。希望这能达到您的目的。
var filterActive;
var _defaultFilter = "cat-sun";
function filterCategory(category) {
if (filterActive != category) {
// reset results list
$('.filter-cat-results .f-cat').removeClass('active');
// elements to be filtered
if( category == "cat-all") {
$('.filter-cat-results .f-cat').addClass("active");
} else {
$('.filter-cat-results .f-cat')
.filter('[data-cat="' + category + '"]')
.addClass('active');
}
// reset active filter
filterActive = category;
$('.filtering button').removeClass('active');
}
}
//$('.f-cat').addClass('active');
$(".f-cat[data-cat="+_defaultFilter+"]").addClass('active');
filterActive = _defaultFilter;
$('.filtering button').click(function() {
filterCategory($(this).attr('data-cat'));
$(this).addClass('active');
});
button {
padding: 1em;
border: 0;
margin: 0 .5em .5em -10px;
color: #fff;
cursor: pointer;
outline: none;
}
button.cat-sun {
background: #ff4136;
}
button.cat-sun:hover {
background: #e90d00;
}
button.cat-mon {
background: #2ecc40;
}
button.cat-mon:hover {
background: #208e2c;
}
button.cat-tue {
background: #0074d9;
}
button.cat-tue:hover {
background: #004b8d;
}
button.cat-wed {
background: magenta;
}
button.cat-wed:hover {
background: darkmagenta;
}
button.cat-all {
background: #333;
}
button.cat-all:hover {
background: #0d0d0d;
}
.f-cat {
color: #fff;
padding: 1em;
border: 5px solid #fff;
}
.cat-sun {
background: #ff4136;
}
.cat-mon {
background: #2ecc40;
}
.cat-tue {
background: #0074d9;
}
.cat-wed {
background: magenta;
}
.row .col {
opacity: 0;
display: none;
}
.row .col.active {
opacity: 1;
display: block;
-webkit-animation: fadeIn 0.65s ease forwards;
animation: fadeIn 0.65s ease forwards;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<h2>jQuery Button Filtering</h2>
</div>
</div>
<div class="container filtering">
<ul class="nav nav-pills nav-filter-cat">
<li><button class="cat-all" data-cat="cat-all">All Days</button></li>
<li><button class="cat-sun active" data-cat="cat-sun">Sunday</button></li>
<li><button class="cat-mon" data-cat="cat-mon">Monday</button></li>
<li><button class="cat-tue" data-cat="cat-tue">Tuesday</button></li>
<li><button class="cat-wed" data-cat="cat-wed">Wednesday</button></li>
</ul>
<div class="row filter-cat-results">
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
</div>
</div>