如何使用jquery按评级过滤？

时间：2017-04-21 09:06:49

标签： javascript jquery

我有酒店列表页面，我想通过trivago filtering等评级过滤我的酒店（如下图所示）

enter image description here

并且我只显示匹配的结果它是迄今为止的okey但是我想有些东西丢失了我的意思是我可以显示多个过滤器例如坏和优秀或者从正常到非常好如果你查看我的代码你将要去理解我的意思。我尝试相同的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>

2 个答案:

答案 0 :(得分：1)

以下是使用不同评级类型的数值的示例。 这只是一种方法，确定你会得到这个想法。

＆＃13;
＆＃13; 
$(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();
      })

  });
})
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

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

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

＆＃13;
＆＃13; 
$(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()
    }

  });
})
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题