Question

我正在使用该方法在这里描述的mixitup中设置多个过滤：

不幸的是我无法用css突出显示有效过滤器。见这里：

帮助将不胜感激

HTML

    <div id="filter"> <span>Filter</span>

    <ul class="filter-list">
        <li data-filter="mix" class="filter" data-dimension="type"><a href="#">all</a>
        </li>
        <li data-filter="lemon" class="filter" data-dimension="type"><a href="#">Lemon</a>
        </li>
        <li data-filter="orange" class="filter" data-dimension="type"><a href="#">Orange</a>
        </li>
        <li data-filter="apple" class="filter" data-dimension="type"><a href="#">Apple</a>
        </li>
    </ul>
</div>
<div id="filter"> <span>Filter</span>

    <ul class="filter-list">
        <li data-filter="mix" class="filter" data-dimension="manufacturer"><a href="#">all</a>
        </li>
        <li data-filter="1" class="filter" data-dimension="manufacturer"><a href="#">1</a>
        </li>
        <li data-filter="2" class="filter" data-dimension="manufacturer"><a href="#">2</a>
        </li>
    </ul>
</div>
<ul id="grid">
    <li class="mix lemon 2">
         <h3>Lemon</h3>

        <p>2</p>
    </li>
    <li class="mix orange 1">
         <h3>Orange</h3>

        <p>1</p>
    </li>
    <li class="mix orange 2">
         <h3>Orange</h3>

        <p>2</p>
    </li>
    <li class="mix apple 1">
         <h3>Apple</h3>

        <p>1</p>
    </li>
</ul>

的JavaScript

// Wait until all images load
function imgLoaded(img) {
    var $img = $(img);
    $img.closest('.img_wrapper').addClass('loaded');
}

// Start mixitup
$('#grid').mixitup();

var $filters = $('.filter-list').find('li'),
    dimensions = {
        type: '',
        manufacturer: ''
    };

$filters.unbind('click');

$filters.on('click', function () {
    var $t = $(this),
        dimension = $t.attr('data-dimension'),
        filter = $t.attr('data-filter');
    console.info("dimension: " + dimension);
    console.info("filter " + filter);
    console.info("current filter for this cat: " + dimensions[dimension]);
    dimensions[dimension] = filter;
    console.info("selected filter for this cat: " + dimensions[dimension]);
    console.info("type: " + dimensions['type']);
    console.info("manufacturer: " + dimensions['manufacturer']);


    $('#grid').mixitup('filter', [dimensions['type'], dimensions['manufacturer']]);
});

CSS

    li {
    list-style: none;
}
#grid .mix {
    opacity: 0;
    display: none;
    padding: 10px;
    border: 1px solid #d0d0d0;
    width: 150px;
    margin: 0 0 10px 10px;
}
.filter-list li {
    margin-left: 20px;
    cursor: pointer;
    list-style-type: square;
}
.filter-list li.active {
    font-weight: 700;
}

Answer 1

$('#grid').mixitup({
  controls: {
    toggleFilterButtons: true,
    toggleLogic: 'or',
    activeClass: 'active'
  }
}

在实例化mixitup时，您需要传递活动按钮所具有的类的名称。

Mixitup jquery多个过滤器css的控件

1 个答案: