如何創建多個排序按鈕

Question

我正在工作的項目的設計有三個按鈕用於排序頁面上的項目。

第一個排的價格，第二個項目的可用性和按日期的第三個。 設計師希望我創建它們，以便當按鈕被點擊一次時，它應該改變顏色，指示項目被排序，並且當它再次被點擊時，箭頭應該改變方向，指示排序順序已經被逆轉。

我該怎麼做？我嘗試使用單選按鈕標籤和隱藏的無線電指示器，但單選按鈕不能單擊兩次。

Answer 1

你可以使用一個非常有用的插件來處理這樣的事情。 結帳http://isotope.metafizzy.co/

Answer 2

好的，所以我最終使用了單選按鈕，但我添加了腳本，通過在活動按鈕上的asc和desc類之間切換來上下切換按鈕箭頭。 此前我忘記提及我使用引導程序4切換狀態（data-toggle =「buttons」）。

<div class="sort-group" data-toggle="buttons"> 
    <p>Sortieren:</p><label class="btn btn-secondary sortable active asc" id="sort-by-price"> 
    <input type="radio" name="options" id="option1" autocomplete="off" checked> PREIS 
    </label><label class="btn btn-secondary sortable" id="sort-by-availability"> 
    <input type="radio" name="options" id="option2" autocomplete="off" checked> VERFÜGBARKEIT 
    </label><label class="btn btn-secondary sortable" id="sort-by-date"> 
    <input type="radio" name="options" id="option3" autocomplete="off"> DATUM 
    </label> 
</div> 

注：排序組的子元素的結束標記和隨後的子元素的開始標記是在同一行上，以避免由於顯示它們之間的空白：直列塊。

SCSS：

.sort-group { 
     p, 
     label.btn { 
       margin-bottom: 0; 
     } 
     p { 
       color: 3d3d3d; 
       display: inline-block; 
       font-size: 14px; 
       margin-right: 24px; 
       @media (max-width: 767px) { 
         display: block; 
         margin-top: 13px; 
         margin-bottom: 13px; 
       } 
     } 
     label.btn{ 
      background: url('../images/icons/down.svg') right 16px center no-repeat;   
      border-radius: 40px; 
      font-size: 12px; 
      font-weight: bold; 
      height: 26px; 
      line-height: 25px; 
      margin-right: 12px; 
      padding: 0 16px; 
      text-align: left; 
      -webkit-user-select: none; 
      -moz-user-select: none; 
      -ms-user-select: none; 
      user-select: none; 
      &.active { 
        color: #fff; 
        background-color: #333; 
        border-color: #333; 
        outline: none; 
      } 
      &:last-of-type { 
        margin-right: 0; 
      } 
      @media (max-width: 767px) { 
        display: block; 
        margin-bottom: 13px; 
      } 
     } 
     label.asc{ 
       background: url('../images/icons/down-white.svg') right 16px center no-repeat; 
     } 
     label.desc{ 
       background: url('../images/icons/up-white.svg') right 16px center no-repeat; 
     } 
     #sort-by-price { 
      width: 93px; 
     } 
     #sort-by-availability { 
      width: 164px; 
     } 
     #sort-by-date{ 
      width: 101px; 
     } 
} 

的jQuery：

$(".sortable").click(function(){ 
     var o = $(this).hasClass('asc') ? 'desc' : 'asc'; 
     $('.sortable').removeClass('asc').removeClass('desc'); 
     $(this).addClass(o); 
    });