0

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

以下是过滤后内容的示例。当从 中选择过滤器时，Mixitup 添加内联样式以隐藏元素<ul class="filter-list">：

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

这对 Mixitup 使用以下配置：

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>

理想情况下data-order，每个剩余元素的属性都会增加 1。

这是一个正在进行原型的 Codepen：http ://codepen.io/abbasarezoo/pen/ygWayB/

任何帮助将不胜感激。

4

0 回答 0