javascript - jQuery Filter - 如何设置除 "All"之外的不同事件按钮？

Question

我设置了一个简单的 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>

Answer 1

您将所有“.f cat”元素设置为“事件”。所以默认情况下所有元素都会显示。而且我也不明白点击处理程序中“if else” block 背后的原因这是修改后的代码。希望这能满足您的目的。

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>