javascript - Mixitup jquery 多个过滤器 css 控件

Question

我正在使用此处描述的方法在 mixitup 中设置多重过滤:

Multiple filters in jQuery

不幸的是，我无法使用 css 突出显示事件过滤器。看这里:

http://jsfiddle.net/LdVJv/

帮助将不胜感激

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 时，您需要传递希望事件按钮具有的类的名称。