评级按钮过滤器

Question

我正试图将我的列表从恶劣过滤到像trivago系统一样优秀

if you are going to click this link  你会理解我在说什么，我会在图像上展示我想做的事情。

当您点击按钮时，您会看到样式正在删除或再次添加并显示酒店列表我真的不明白该怎么做？有什么例子

* {
  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;
}

<main id="wrap">

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

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


</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

看一下这个代码，就像在trivago页面上一样工作！

＆＃13;

＆＃13;

$("button").on("click", function (){
  $(this).css("opacity", "1");
  $(this).nextAll().css("opacity", "1");
  $(this).prevAll().css("opacity", "0.5");
});

＆＃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;

<main id="wrap">

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

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


</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

jQuery是必需的btw！您已将其添加到代码段中。