Javascript 使用Mixitup向筛选项添加数据属性

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

下面是一个过滤内容的示例。当从

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

这与预期一样有效，但理想情况下，我想进一步扩展它，以便得到以下结果：

<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

这是一个正在进行的原型代码笔：

---

任何帮助都将不胜感激。

css现在可以使用标签、复选框或单选按钮来实现这一点，这让我想起了几年前我在codepen上交的一个老玩艺儿。它使用lorempixel图像并按族对它们进行排序（tous表示所有，-，aucune表示无；））类用于隐藏/显示它们。没有找到另一个带有target的旧示例。这仅适用于屏幕，而如果要做出选择，则可以处理上一个在表单内部构建的示例（css在没有表单的情况下可以工作），并进一步选择：）

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>