我正在尝试过滤一些具有两个属性的 div。 我有两个过滤器,一个用于星级,一个用于董事会类型。 我想根据在 div 属性 stars=""和 board=""
上找到的信息过滤 divHTML:
<!-- Rating Filter Menu -->
<h4><a href="#rating-filter">Rating</a></h4>
<div id="rating-filter">
<div>
<ul>
<li data-stars-id="alls"> <a href="#">Toate<small class="total"></small></a> </li>
<li data-stars-id="3"> <a href="#">3 STARS<small class="total-3"></small></a> </li>
<li data-stars-id="4"> <a href="#">4 STARS<small class="total-4"></small></a> </li>
<li data-stars-id="5"> <a href="#">5 STARS<small class="total-1"></small></a></li>
</ul>
</div>
</div>
<!-- Board Filter Menu -->
<h4><a href="#board-filter">Board Type</a></h4>
<div id="board-filter">
<div>
<ul>
<li data-board-id="allb"> <a href="#">Toate<small class="total"></small></a> </li>
<li data-board-id="Half Board"> <a href="#">Half Board<small class="total-hb"></small></a> </li>
<li data-board-id="Full Board"> <a href="#">Full Board<small class="total-fb"></small></a> </li>
<li data-board-id="Breakfast"> <a href="#">Breakfast<small class="total-bb"></small></a></li>
</ul>
</div>
</div>
<!-- End Menu -->
<!-- Start Listing -->
<div id="hotel-list" class="hotel-list">
<div stars="3" board="Full Board">3 STARS / FULL BOARD</div>
<div stars="3" board="Breakfast">3 STARS / BREAKFAST</div>
<div stars="4" board="Half Board">4 STARS / HALF BOARD</div>
<div stars="5" board="Full Board">5 STARS / FULL BOARD</div>
<div stars="4" board="Half Board">4 STARS / HALF BOARD</div>
<div stars="5" board="Full Board">5 STARS / FULL BOARD</div>
</div>
<!-- End Listing -->
jQuery 是:
//Rating
$("#rating-filter LI").on("click", function () {
$("div[stars]").hide(6);
id = $(this).attr("data-stars-id")
if (id == "alls") {
//Show all
$("div[stars]").show(6)
} else {
//Show just the selected one
$("div[stars]" + id).show(6)
}
});
//Board
$("#board-filter LI").on("click", function () {
$("div[board]").hide(6);
id = $(this).attr("data-board-id")
if (id == "allb") {
//Show all
$("div[board]").show(6)
} else {
//Show just the selected one
$("div[board]" + id).show(6)
}
});
可以找到 JSFiddle here
最佳答案
如果您想根据这两个选择进行过滤,我建议使用 filter()
.试试这个:
$("#rating-filter li").on("click", function () {
id = $(this).attr("data-stars-id");
if (id == "alls") {
$("div[stars]").show()
} else {
$('#hotel-list div').filter(function(){
return $(this).attr('stars') != id
}).hide();
}
return false;
});
//Board
$("#board-filter li").on("click", function () {
id = $(this).attr("data-board-id");
if (id == "allb") {
$("div[board]").show()
} else {
$('#hotel-list div').filter(function(){
return $(this).attr('board') != id
}).hide();
}
return false;
});
DemoFiddle
现在,如果您只想根据一个选择进行过滤,只需要在过滤前再次显示所有 div:
AnotherDemo
关于jquery - 使用 Jquery 过滤具有两个或多个属性的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28565051/