評分按鈕過濾

Question

我試圖從壞的篩選名單出色的像新賬戶系統

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

看看這段代碼其工作像新賬戶頁面上！

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

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

jQuery是BTW需要！你已經將它包含在你的代碼片段中。