Jquery过滤器隐藏div内的div

Question

我有2个过滤器用于归档一些div。但是当预设过滤按钮时，隐藏div内容。为了更好的例子，我构建了一个JSFiddle

JSFiddle

Html是：

<!-- 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是：

//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;
});

因此，代码以某种方式提交文件，但它隐藏了内部其他div的内容。

Answer 1

我强烈建议您使用data属性替换这些自定义属性，并在选择酒店/过滤器元素时使用类。在jQuery中扩展和控制会更容易，只使用单个on click事件（或任意多个）过滤器：

＆＃13;

＆＃13;

$(".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;
});

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

将您的选择器更改为$("#hotel-list > div"). This just matches the DIVs that are immediate children of＃hotel-list`，这样您就不会隐藏孙子。

//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;
});

FIDDLE