I have 2 filters for filering some divs. but when a filter button is pressend the div content is hidden. For a better example i have build a JSFiddle
Html is :
<!-- 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"><div>Test for 3 Stars / Full Board</div>3 STARS / FULL BOARD</div>
<div stars="3" board="Breakfast"><div>Test for 3 Stars / Breakfast</div>3 STARS / BREAKFAST</div>
<div stars="4" board="Half Board"><div>Test for 4 Stars / Half Board</div>4 STARS / HALF BOARD</div>
<div stars="5" board="Full Board"><div>Test for 5 Stars / Full Board</div>5 STARS / FULL BOARD</div>
<div stars="4" board="Half Board"><div>Test for 4 Stars / Half Board</div>4 STARS / HALF BOARD</div>
<div stars="5" board="Full Board"><div>Test for 5 Stars / Full Board</div>5 STARS / FULL BOARD</div>
</div>
<!-- End Listing -->
jQuery is:
//Rating
$("#rating-filter li").on("click", function () {
id = $(this).attr("data-stars-id");
if (id == "alls") {
$("div[stars]").show()
} else {
$('#hotel-list div').show();
$('#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').show();
$('#hotel-list div').filter(function(){
return $(this).attr('board') != id
}).hide();
}
return false;
});
So the code is filering somehow but it hide the content from the other div that is inside it.
I'd strongly recommend you to replace these custom attributes with data
attributes and use classes when selecting hotels/filters elements. It would be much easier to extend and controll in jQuery, using just single on click
event for both (or as many as you like) filters :
$(".filters li").on("click", function () { id = $(this).data("id"); filter = $(this).data("filter"); $("#hotel-list .hotels").show() && id == "all" || $('#hotel-list .hotels:not([data-'+filter+'="'+id+'"])').hide(); return false; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Rating Filter Menu --> <h4><a href="#rating-filter">Rating</a></h4> <div id="rating-filter" class="filters"> <div> <ul> <li data-id="all" data-filter="stars"> <a href="#">Toate<small class="total"></small></a> </li> <li data-id="3" data-filter="stars"> <a href="#">3 STARS<small class="total-3"></small></a> </li> <li data-id="4" data-filter="stars"> <a href="#">4 STARS<small class="total-4"></small></a> </li> <li data-id="5" data-filter="stars"> <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" class="filters"> <div> <ul> <li data-id="all" data-filter="board"> <a href="#">Toate<small class="total"></small></a> </li> <li data-id="Half Board" data-filter="board"> <a href="#">Half Board<small class="total-hb"></small></a> </li> <li data-id="Full Board" data-filter="board"> <a href="#">Full Board<small class="total-fb"></small></a> </li> <li data-id="Breakfast" data-filter="board"> <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 data-stars="3" data-board="Full Board" class="hotels"><div>Test for 3 Stars / Full Board</div>3 STARS / FULL BOARD</div> <div data-stars="3" data-board="Breakfast" class="hotels"><div>Test for 3 Stars / Breakfast</div>3 STARS / BREAKFAST</div> <div data-stars="4" data-board="Half Board" class="hotels"><div>Test for 4 Stars / Half Board</div>4 STARS / HALF BOARD</div> <div data-stars="5" data-board="Full Board" class="hotels"><div>Test for 5 Stars / Full Board</div>5 STARS / FULL BOARD</div> <div data-stars="4" data-board="Half Board" class="hotels"><div>Test for 4 Stars / Half Board</div>4 STARS / HALF BOARD</div> <div data-stars="5" data-board="Full Board" class="hotels"><div>Test for 5 Stars / Full Board</div>5 STARS / FULL BOARD</div> </div> <!-- End Listing -->
Change your selector to $("#hotel-list > div"). This just matches the DIVs that are immediate children of
$("#hotel-list > div"). This just matches the DIVs that are immediate children of
#hotel-list`, so you don't hide the grandchildren.
//Rating
$("#rating-filter li").on("click", function () {
id = $(this).attr("data-stars-id");
if (id == "alls") {
$("div[stars]").show()
} else {
$('#hotel-list > div').show();
$('#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').show();
$('#hotel-list > div').filter(function(){
return $(this).attr('board') != id
}).hide();
}
return false;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.