javascript - 如何用jquery按评级过滤？

Question

我有酒店列表页面，我想按 trivago filtering 等评级来过滤我的酒店(如下图)

我只显示匹配的结果，到目前为止还可以，但我猜缺少了一些东西，我的意思是我可以显示多个过滤器，例如坏和优秀，或者从正常到非常好，如果你检查我的代码，你会明白我的意思。我尝试了相同的 trivago 过滤，但只有这一部分我做不到

所以这就是我到目前为止所尝试的

$(document).ready(function() {
  $("button").on("click", function() {
    var dataRate = $(this).attr("data-rate");

    $(this).css("opacity", "1");
    $(this).nextAll().css("opacity", "1");
    $(this).prevAll().css("opacity", "0.5");
    $("#content .filter-list").hide();

    $('#content .filter-list[data-show-list="' + dataRate + '"]').show();

  });
})

* {
  outline: none;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 10px;
}

#wrap {
  width: 960px;
}

#wrap:before,
#wrap:after {
  content: "";
  display: table;
  clear: both;
}

#filter {
  width: 40%;
  float: left;
}

#content {
  float: right;
  width: 59%;
  margin-left: 1%;
  font-size: 12px;
  font-family: sans-serif;
}

.filter-list {
  border: 1px solid #ccc;
  margin-bottom: 5px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<main id="wrap">

  <div id="filter">
    <button data-rate="bad" style="background:#cc0033;color:#fff" name="rating">bad</button>
    <button data-rate="normal" style="background:orange;color:#fff" name="rating">normal</button>
    <button data-rate="good" style="background:#99cc00;color:#fff" name="rating">good</button>
    <button data-rate="verygood" style="background:green;color:#fff" name="rating">very good</button>
    <button data-rate="excellent" style="background:darkgreen;color:#fff" name="rating">excellent</button>
  </div>
  <!-- filter-->

  <div id="content">
    <div class="filter-list" data-show-list="good">
      I'm a very good
    </div>
    <div class="filter-list" data-show-list="bad">
      this is the bad list
    </div>
    <div class="filter-list" data-show-list="verygood">
      I'm a very good to
    </div>
    <div class="filter-list" data-show-list="excellent">
      Excellent!
    </div>
    <div class="filter-list" data-show-list="normal">
      Iııh normal!
    </div>
    <div class="filter-list" data-show-list="good">
      Good - enough thanks
    </div>
    <div class="filter-list" data-show-list="bad">
      Bad - don't ever..
    </div>
    <div class="filter-list" data-show-list="excellent">
      Excellent again
    </div>
    <div class="filter-list" data-show-list="bad">
      isn't bad ? I think yes bad..
    </div>
  </div>


</main>

Answer 1

以下是使用不同评级类型的数值的示例。这只是一种方法，相信您会明白的。

$(document).ready(function() {

  var $list = $("#content").find(".filter-list");
  var $btn = $("button");

  $btn.on("click", function() {
  
    var dataRate = $(this).attr("data-rate");
    
    $(this).css("opacity", "1");
    $(this).nextAll().css("opacity", "1");
    $(this).prevAll().css("opacity", "0.5");
    
    $list.show();
    
    $list
      .filter(function(idx, item) {
        return item.dataset.showList < dataRate;
      })
      .each(function(idx, item) {
        $(item).hide();
      })

  });
})

* {
  outline: none;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 10px;
}

#wrap {
  width: 960px;
}

#wrap:before,
#wrap:after {
  content: "";
  display: table;
  clear: both;
}

#filter {
  width: 40%;
  float: left;
}

#content {
  float: right;
  width: 59%;
  margin-left: 1%;
  font-size: 12px;
  font-family: sans-serif;
}

.filter-list {
  border: 1px solid #ccc;
  margin-bottom: 5px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<main id="wrap">

  <div id="filter">
    <button data-rate="1" style="background:#cc0033;color:#fff" name="rating">bad</button>
    <button data-rate="2" style="background:orange;color:#fff" name="rating">normal</button>
    <button data-rate="3" style="background:#99cc00;color:#fff" name="rating">good</button>
    <button data-rate="4" style="background:green;color:#fff" name="rating">very good</button>
    <button data-rate="5" style="background:darkgreen;color:#fff" name="rating">excellent</button>
  </div>
  <!-- filter-->

  <div id="content">
    <div class="filter-list" data-show-list="3">
      I'm a very good
    </div>
    <div class="filter-list" data-show-list="1">
      this is the bad list
    </div>
    <div class="filter-list" data-show-list="4">
      I'm a very good to
    </div>
    <div class="filter-list" data-show-list="5">
      Excellent!
    </div>
    <div class="filter-list" data-show-list="2">
      Iııh normal!
    </div>
    <div class="filter-list" data-show-list="3">
      Good - enough thanks
    </div>
    <div class="filter-list" data-show-list="1">
      Bad - don't ever..
    </div>
    <div class="filter-list" data-show-list="5">
      Excellent again
    </div>
    <div class="filter-list" data-show-list="1">
      isn't bad ? I think yes bad..
    </div>
  </div>


</main>