[英]Filtering based on two conditions
我有八张卡片,每张卡片上都有两个参数。 第一个参数是年份(2011、2012、2013、2014),第二个参数是类别(工作室,房屋,个人,商业)。 看起来像这样:
我需要整理它们,使所需的卡片变亮,而不需要褪色。 默认情况下,它们都是亮的。 HTML:
<div class="card card-studio card-2011 card-bright">Studio 2011</div>
<div class="card card-house card-2012 card-bright">House 2012</div>
<div class="card card-commercial card-2013 card-bright">Commercial 2013</div>
<div class="card card-personal card-2012 card-bright">Personal 2012</div>
<div class="card card-studio card-2014 card-bright">Studio 2014</div>
<div class="card card-commercial card-2011 card-bright">Commercial 2011</div>
<div class="card card-house card-2014 card-bright">House 2014 </div>
<div class="card card-personal card-2013 card-bright">Personal 2013</div>
我添加带有年份的按钮:
<a href="#" class="button button-2011">2011</a>
<a href="#" class="button button-2012">2012</a>
<a href="#" class="button button-2013">2013</a>
<a href="#" class="button button-2014">2014</a>
当用户单击“年份”按钮时,我们将选择具有所需年份等级的卡片,并删除其“亮/褪色”等级,以防万一。 然后,我们向这些卡添加“亮”类。 然后,我们将所有不需要的年份的卡片都作为“褪色”类别添加(也删除以前的类别,以防万一)。 我们还使按钮带有下划线,而其兄弟姐妹不带有下划线。 一切看起来像这样:
$(".button").on("click", function(event){
event.preventDefault();
if($(this).hasClass("button-2011")){
$(".card-2011").removeClass("card-bright card-faded").addClass("card-bright");
$(".card").not(".card-2011").removeClass("card-bright card-faded").addClass("card-faded");
$(this).siblings().removeClass("button-active").end().addClass("button-active");
}
JSfiddle: https ://jsfiddle.net/6vLzyowc/
现在看起来似乎很简单,但是当我尝试添加第二个排序条件类别时,麻烦就来了。
一方面,我当然需要做与第一种情况相同的事情,即使所需的类别变亮,而不使褪色:
if($(this).hasClass("button-house")){
$(".card-house").removeClass("card-bright card-faded").addClass("card-bright");
$(".card").not(".card-house").removeClass("card-bright card-faded").addClass("card-faded");
}
但是,这将使所有具有所需类别的卡都变得“明亮”,并且我也可以获得上一年的排序结果。 看来我需要先对其进行分类。 因此,我采用第一年的排序结果(即“亮”卡)并将没有所需类别的卡片分类为“褪色”:
if($(this).hasClass("button-house")){
$(".card-bright").not("card-house").addClass("card-faded");
}
它会有所帮助,但是我仍然不知道如何现在可以将剩余的卡添加到所需的类别中,以便同时满足这两个条件。 因此,如何将以前的排序结果 排序与所有项目排序结合起来?
用所有按钮拨弄琴: https : //jsfiddle.net/hm1emr8p/
我认为您的方法有些复杂。 以下适用于任意数量的过滤器。 诀窍是保持所选内容的状态,并且在进行任何更改时,只需将此状态重新应用于卡片元素即可。
(function () { var active = []; $('.filter').each(function (idx, el) { var $el = $(el); active.push(''); $el.on('click', '.button', function () { var $this = $(this); active[idx] = $this.data('toggle'); $el.find('.button').removeClass('button-active'); $this.addClass('button-active'); update(); }); }); function update() { var a = active.join(''); if (a.length === 0) { $('.card').removeClass('card-faded'); } else { $('.card').addClass('card-faded').filter(active.join('')).removeClass('card-faded'); } } })();
a { text-decoration: none; color: black; } .buttons { margin-top: 40px; } .time { margin-bottom: 20px; } .card-faded { opacity: 0.3; } .button-active { text-decoration: underline; }
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <div class="card card-2011 card-studio">Studio 2011</div> <div class="card card-2012 card-house">House 2012</div> <div class="card card-2013 card-commercial">Commercial 2013</div> <div class="card card-2012 card-personal">Personal 2012</div> <div class="card card-2014 card-studio">Studio 2014</div> <div class="card card-2011 card-commercial">Commercial 2011</div> <div class="card card-2014 card-house">House 2014 </div> <div class="card card-2013 card-personal">Personal 2013</div> <div class="buttons"> <div class="filter time"> <a class="button button-2011" data-toggle=".card-2011">2011</a> <a class="button button-2012" data-toggle=".card-2012">2012</a> <a class="button button-2013" data-toggle=".card-2013">2013</a> <a class="button button-2014" data-toggle=".card-2014">2014</a> <a class="button button-all button-active" data-toggle="">All time</a> </div> <div class="filter category"> <a class="button button-studio" data-toggle=".card-studio">Studio</a> <a class="button button-house" data-toggle=".card-house">House</a> <a class="button button-commercial" data-toggle=".card-commercial">Commercial</a> <a class="button button-personal" data-toggle=".card-personal">Personal</a> <a class="button button-all button-active" data-toggle="">All</a> </div> </div>
我建议将所选类别和所选时间跨度保存在变量中:
var lastCategory = '';
var lastYear = '';
在您的情况下,可以使用data-
属性来存储信息,如下所示:
<a href="#" data-year="2011" class="button button-2011">2011</a>
和:
<a href="#" data-cat="studio" class="button button-studio">Studio</a>
然后根据click
处理程序中数据元素的值执行操作:
$(".category > .button").on("click", function(event){
event.preventDefault();
var tmpCat = $(this).data('cat');
lastCategory = tmpCat;
$(".card").removeClass("card-faded");
if (tmpCat == 'all') {
if (lastYear == 'alltime') {
$(".card").addClass("card-faded");
} else {
$(".card-"+lastYear).addClass("card-faded");
}
} else {
if (lastYear == 'alltime') {
$(".card-" + tmpCat).addClass("card-faded");
} else {
$(".card-" + tmpCat + ".card-"+lastYear).addClass("card-faded");
}
}
$(this).siblings()
.removeClass("button-active")
.end()
.addClass("button-active");
});
$(".time > .button").on("click", function(event){
event.preventDefault();
var tmpYear = $(this).data('year');
lastYear = tmpYear;
$(".card").removeClass("card-faded");
if (tmpYear == 'alltime') {
if (lastCategory == 'all') {
$(".card").addClass("card-faded");
} else {
$(".card-" + lastCategory).addClass("card-faded");
}
} else {
if (lastCategory == 'all') {
$(".card-" + tmpYear).addClass("card-faded");
} else {
$(".card-" + lastCategory + ".card-"+tmpYear).addClass("card-faded");
}
}
$(this).siblings()
.removeClass("button-active")
.end()
.addClass("button-active");
});
有不计其数的方式导致罗马,这不是理想的选择,但是请尝试避免if (1) then, if (2) then, if (3) then, etc....
代码。 我分叉了您的小提琴并且做了一个有效的演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.