如何使用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>

Answer 2

单击时切换每个按钮上的选定类。

遍历所有选定的按钮以创建过滤器值数组。

然后在项目上使用filter()，并将每个数据属性与过滤器数组进行比较，看看是否应该包含它

$(document).ready(function() {

  var $btns = $('#filter button'),
    $items = $("#content .filter-list");
    
  $btns.on("click", function() {
    $(this).toggleClass('selected');
    // create filter values array from all selected buttons
    var filterArray = $btns.filter('.selected').map(function() {
      return $(this).data('rate')
    }).get();
  
    if (filterArray.length) {
      // hide all items, then filter ones that match above array to show
      $items.hide().filter(function() {
        var rating = $(this).data('show-list');
        // only include if rating is in array
        return $.inArray(rating, filterArray) > -1;
      }).show();

    } else {
      $items.show()
    }

  });
})

* {
  outline: none;
}

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

button.selected {
  opacity: 1
}

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