Question

我试图用两个属性过滤一些div。我有两个过滤器，一个用于星级，一个用于板型。我想根据div属性stars =“”和board =“”

上的信息过滤div

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

Answer 1

你必须纠正：

$("div[stars]" + id).show(6)
$("div[board]" + id).show(6)

要：

$('div[stars="' + id + '"]').show(6)
$('div[board="' + id +'"]').show(6)

小提琴：http://jsfiddle.net/8vwbpLtv/14/

Answer 2

如果您想根据这两个选项进行过滤，我建议使用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：

使用Jquery过滤具有两个或多个属性的div

2 个答案:

DemoFiddle

AnotherDemo