保存原始数据过滤器，未过滤和未排序

Question

我正在尝试将原始数据状态保存到"all"过滤器。内容按数据属性"数据过滤器"进行排序和过滤。所以我的输出将是未经过滤和未排序的原始状态。注意：具有相同"数据 ID"的div 内容将仅显示一次。

因此，我在"all"过滤器上以及第一次运行代码时所需的输出将是：

• 内容优先
• 内容二
• 内容三
• 内容四

也为 - 过滤"一"，输出将始终为"内容优先"， - 过滤"二"输出将是"内容第二"内容第三" ...等等

function removeDuplicates() {
var content = $('.content');
contentIds = content.map(function() {
return $(this).data("id");
}).toArray();
var newSetContentIds = [...new Set(contentIds)];
listedContent = $(newSetContentIds).map(function() {
return $("[data-id=" + this + "]").first()[0];
});
listedContent.addClass('listed');
}
$('.filter').click(function() {
var filterId = $(this).attr('data-filter');
$('.content').hide();
$('.content[data-filter=' + filterId + ']').addClass('active').show();
removeDuplicates();
});

.filter-container {
display: flex;
}
.filter-container div {
margin: 10px;
cursor: pointer;
}
.listed {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
<div class="filter" data-filter="all">
all
</div>
<div class="filter" data-filter="1">
one
</div>
<div class="filter" data-filter="2">
two
</div>
<div class="filter" data-filter="3">
three
</div>
</div>
<div class="content-container">
<div class="content" data-filter="1" data-id="20">
content first
</div>
<div class="content" data-filter="2" data-id="15">
content second
</div>
<div class="content" data-filter="2" data-id="17">
content third
</div>
<div class="content" data-filter="2" data-id="17">
content third
</div>
<div class="content" data-filter="3" data-id="16">
content fourth
</div>
<div class="content" data-filter="1" data-id="20">
content first
</div>
</div>

Answer 1

您的removeDuplicates函数不起作用。此外，它还暗示您只想在第一次按下任何过滤器时运行此功能。

与其使用应用内联显示的show()和hide()来弄乱.listed类，不如使用另一个类.hidden来显示或隐藏div。

最后，不清楚是要排序一次还是每次，当所选过滤器不是"全部"时。无论如何，如前所述，您可以将flex属性用于容器，order属性用于div。它位于removeDuplicates内部，考虑到您想在第一次单击后对div 进行一次排序。

function removeDuplicates() {
$(".filter").off("click", removeDuplicates);
var content = $('.content');
contentIds = content.map(function() {
$(this).css('order', $(this).data("filter"));
return $(this).data("id");
}).toArray();
var newContentIds = contentIds.filter((a, i, aa) => aa.indexOf(a) === i && aa.lastIndexOf(a) !== i);
listedContent = $(newContentIds).map(function() {
return $("[data-id=" + this + "]")[0];
});
listedContent.addClass('listed');
}
$(".filter").on("click", removeDuplicates);
$('.filter').click(function() {
var filterId = $(this).attr('data-filter');
if (filterId == "all") {
$('.content').removeClass('hidden');
return;
}
$('.content').addClass('hidden');
$('.content[data-filter=' + filterId + ']').addClass('active').removeClass('hidden');
});

.filter-container {
display: flex;
}
.filter-container div {
margin: 10px;
cursor: pointer;
}
.hidden {
display: none;
}
.content.listed {
display: none;
}
.content-container {
display: flex;
flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
<div class="filter" data-filter="all">
all
</div>
<div class="filter" data-filter="1">
one
</div>
<div class="filter" data-filter="2">
two
</div>
<div class="filter" data-filter="3">
three
</div>
</div>
<div class="content-container">
<div class="content" data-filter="1" data-id="20">
content first
</div>
<div class="content" data-filter="2" data-id="15">
content second
</div>
<div class="content" data-filter="2" data-id="17">
content third
</div>
<div class="content" data-filter="2" data-id="17">
content third
</div>
<div class="content" data-filter="3" data-id="16">
content fourth
</div>
<div class="content" data-filter="1" data-id="20">
content first
</div>
</div>