Question

我有一个使用Mixitup来过滤内容的当前项目。我需要剩下的元素继承特定的CSS样式，反之亦然。似乎我可以做到这一点的唯一方法是将数据属性添加到非隐藏项目中，因为Mixitup无法从DOM中删除元素。

以下是过滤内容的示例。当从nogil：

中选择过滤器时，Mixitup会添加内联样式以隐藏元素

<ul class="filter-list">

这使用Mixitup的以下配置：

<ul class="filter-list">
  <li><a class="filter" href="#" data-filter=".filter-1">Filter 1</a></li>
  <li><a class="filter" href="#" data-filter=".filter-2">Filter 2</a></li>
</ul>

<div class="items">
  <div class="mix filter-1 filter-item" style="display: none;"></div>
  <div class="mix filter-2 filter-item"></div>
  <div class="mix filter-1 filter-item" style="display: none;"></div>
  <div class="mix filter-2 filter-item"></div>
</div>

这可以按预期工作，但理想情况下我想进一步扩展这一点，以便得到以下结果：

var mixer = mixitup('.items');
var mixer = mixitup(containerEl);

var mixer = mixitup(containerEl, {
    selectors: {
        target: '.filter-item'
    },
    animation: {
        duration: 300
    }
});

理想情况下，每个剩余元素的<div class="items"> <div class="mix filter-1 filter-item" style="display: none;"></div> <div class="mix filter-2 filter-item" data-order="1"></div> <div class="mix filter-1 filter-item" style="display: none;"></div> <div class="mix filter-2 filter-item" data-order="2"></div> </div>属性增加1。

这是一个持续原型的Codepen：http://codepen.io/abbasarezoo/pen/ygWayB/

将非常感激地收到任何帮助。

使用Mixitup将数据属性添加到筛选的项目

0 个答案: