我正在尝试使用 js(没有插件)制作投资组合过滤器。到目前为止我创建了导航
<div class="filter-nav">
<div class="nav-wrap">
<button class="btn fil-cat active" href="" data-rel="kuche">
<span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
<span>Kuche</span>
</button>
<button class="btn fil-cat" data-rel="bade">
<span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
<span>Bade</span>
</button>
<button class="btn fil-cat" data-rel="mobel">
<span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
<span>Mobel</span>
</button>
<button class="btn fil-cat" data-rel="schreinerei">
<span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
<span>Schreinerei</span>
</button>
<button class="btn fil-cat" data-rel="acrylstein">
<span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
<span>Acrylstein</span>
</button>
<button class="btn fil-cat" data-rel="objekte">
<span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
<span>Objekte</span>
</button>
</div>
</div>
带有数据属性,
和其余代码
<div id="inspiration" class="row in-wrap">
<div class="tile scale-anm kuche col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm bade col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm kuche col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm bade col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm kuche col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm bade col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
</div>
所以我用数据属性选择了用这个 JS 代码选择哪个
function filterInspiration() {
var selectedClass = "";
$('.fil-cat').click(function(){
selectedClass = $(this).attr("data-rel");
$("#inspiration").fadeTo(100, 0.1);
$("#inspiration div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale-anm');
$("#inspiration").fadeTo(300, 1);
}, 300);
});
};
filterInspiration();
我被堆叠的部分是,我如何将事件类添加到我单击的按钮,然后当我单击过滤器导航中的另一个按钮时,然后删除上一个按钮并添加到另一个按钮?
谢谢
最佳答案
您可以使用 jquery
函数来添加和删除类,即 addClass
和 removeClass
- 首先从所有元素中删除类
active
- 将
active
添加到this
(当前元素)
$('.fil-cat').click(function(e) {
$('.fil-cat').removeClass('active');
$(this).addClass('active');
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-nav">
<div class="nav-wrap">
<button class="btn fil-cat" href="" data-rel="kuche">
<span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
<span>Kuche</span>
</button>
<button class="btn fil-cat" data-rel="bade">
<span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
<span>Bade</span>
</button>
<button class="btn fil-cat" data-rel="mobel">
<span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
<span>Mobel</span>
</button>
<button class="btn fil-cat" data-rel="schreinerei">
<span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
<span>Schreinerei</span>
</button>
<button class="btn fil-cat" data-rel="acrylstein">
<span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
<span>Acrylstein</span>
</button>
<button class="btn fil-cat" data-rel="objekte">
<span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
<span>Objekte</span>
</button>
</div>
</div>
关于javascript - 投资组合过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45932824/