Как создать несколько кнопок сортировки

Question

Дизайн проекта, в котором я работаю, имеет три кнопки, используемые для сортировки элементов на странице.

Первый сортирует товары по цене, второй от наличия и третий по дате. Дизайнер хочет, чтобы я создал их так, чтобы при щелчке по кнопке один раз он должен изменить цвет, указывая, что элементы отсортированы, а когда он снова щелкнут, стрелка должна изменить направление, указывая на то, что порядок сортировки был отменен ,

Как это сделать? Я пробовал с помощью ярлыков радиокниг и скрытых радио индикаторов, но переключатели не могут дважды щелкнуть.

Answer 1

Вы можете использовать очень полезный плагин для таких вещей. Оформить заказ http://isotope.metafizzy.co/

Answer 2

Итак, я все равно использовал радиокнопки, но я добавил скрипт, который переключает стрелку кнопки вверх и вниз, переключаясь между классами asc и desc на активной кнопке. Раньше я забыл упомянуть, что я использую bootstrap 4 toggle states (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); 
    });