Question

我正在使用的项目设计有三个按钮，用于对页面上的项目进行排序。

第一个按价格对项目进行排序，第二个按可用性排序，第三个按日期排序。设计师希望我创建它们，以便在按钮被单击时，它应该更改颜色，指示项目已排序，再次单击时，箭头应更改方向，表示排序顺序已反转。

我该怎么做？我尝试使用单选按钮标签和隐藏的无线电指示器，但无法单击两次单选按钮。

Answer 1

你可以使用一个非常有用的插件来做这样的事情。结帐http://isotope.metafizzy.co/

Answer 2

好的，所以我最后还是使用了单选按钮，但是我添加了脚本，通过在活动按钮上的asc和desc类之间切换来上下切换按钮箭头。早些时候我忘了提到我使用bootstrap 4切换状态（data-toggle =＆＃34;按钮＆＃34;）。

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

注意：sort-group的子元素结束标记和后续子元素的开始标记位于同一行，以避免由于display：inline block而导致它们之间出现空白。

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);
    });

如何创建多个排序按钮

2 个答案: