【发布时间】：2020-01-31 11:45:33
【问题描述】：
我正在尝试根据数据属性过滤结果。在大多数情况下，我认为我在那里（它适用于前 3 个选择器），但我在尝试将日期选择器纳入等式时遇到了麻烦。 在这一点上，我对我的方法的质疑是完全正确的——如果需要，我可以更改 HTML——所以请随时提供更好的解决方案。
为了方便任何愿意提供帮助的人，这里是小提琴：https://jsfiddle.net/rnbx0c3j/
谢谢你
选择器：
<div id="stats_filter">
<div id="stats_filter_wrapper" class="grids">
<div class="grid-3 select-wrapper server first">
<label class="server">Server</label>
<select id="select-server">
<option value="all">All</option>
<option value="NicNicFunGame">NicNicFunGame</option>
<option value="GT3_races">GT3_races</option>
</select>
</div>
<div class="grid-3 select-wrapper track">
<label class="track">Track</label>
<select id="select-track">
<option value="all">All</option>
<option value="ks_brands_hatch">ks_brands_hatch</option>
<option value="Imola">Imola</option>
<option value="Spa">Spa</option>
</select>
</div>
<div class="grid-3 select-wrapper car">
<label class="car">Car</label>
<select id="select-car">
<option value="all">All</option>
<option value="ariel_atom_v8">ariel_atom_v8</option>
<option value="rr_caterham_academy_620r">rr_caterham_academy_620r</option>
<option value="ks_porsche_911_gt1">ks_porsche_911_gt1</option>
</select>
</div>
<div class="grid-3 select-wrapper date">
<label class="date">Date</label>
<select id="select-date">
<option value="all">All</option>
<option value="7">Last 7 days</option>
<option value="30">Last 30 days</option>
<option value="182">Last 6 months</option>
<option value="365">Last 12 months</option>
</select>
</div>
</div>
</div>
要过滤的 HTML
<div class="stats-section" id="sectionID_1" data-server="NicNicFunGame" data-track="ks_brands_hatch" data-date="27/09/2019" data-car="ariel_atom_v8">sectionID_1</div>
<div class="stats-section" id="sectionID_2" data-server="NicNicFunGame" data-track="Imola" data-date="03/07/2019" data-car="rr_caterham_academy_620r">sectionID_2</div>
<div class="stats-section" id="sectionID_3" data-server="GT3_races" data-track="Spa" data-date="14/01/2019" data-car="ariel_atom_v8, ks_porsche_911_gt1">sectionID_3</div>
JS
var $select = $('#stats_filter select');
var $statsSection = $('.stats-section');
$select.change(function () {
var include = '';
var exclude = [];
var showAll = true;
var filterDate = false;
$select.each(function () {
var val = $(this).children(':selected').val();
if (val !== 'all') {
switch ($(this).prop('id')) {
case 'select-server':
include += "[data-server='" + val + "']";
break;
case 'select-track':
include += "[data-track='" + val + "']";
break;
case 'select-car':
include += "[data-car*='" + val + "']";
break;
case 'select-date':
var selectedDate = new Date(new Date().setDate(new Date().getDate() - val));
var dd = selectedDate.getDate();
var mm = selectedDate.getMonth() + 1;
var yyyy = selectedDate.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
selectedDate = dd + '/' + mm + '/' + yyyy;
//exclude when date is out of range
$statsSection.each(function () {
var sectionDate = $(this).data('date');
if (process(sectionDate) < process(selectedDate)) {
exclude.push("[data-date='" + sectionDate + "']");
}
exclude.join(',');
});
function process(date) {
var parts = date.split("/");
return new Date(parts[2], parts[1] - 1, parts[0]);
}
filterDate = true;
break;
}
showAll = false;
}
});
if (showAll) {
$statsSection.show();
} else {
//HOW TO DEAL WITH THE DATES??
if (filterDate == true) {
alert('the following dates should be excluded from the results: ' + exclude);
}
//this works for the non-date selectors
$statsSection.not($(include)).hide();
$statsSection.filter($(include)).show();
}
});
【问题讨论】：
-
你为什么不使用alasql之类的东西
-
我看到数据包含一个日期参数。为什么不将计算的过滤日期的 date.UTC() 与数据点的 date.UTC() 值进行比较？ UTC 函数提供了自 1970 年以来的纯毫秒数，因此您的数据范围可以正常工作。如果你有一个大数据集要过滤，你可以为每个数据节点做一个 data-utc 参数作为加载过程，以避免以后重新计算。
-
@Vanquiished Wombat 感谢 UTC 提示，我肯定会调查一下。但是我的主要问题不是日期本身（可能我的问题不够清楚）。主要问题：我已经有一个具有正确数据属性的数组 [exclude] 可以从结果中排除（或包含），但我不明白如何从这里开始工作并根据日期选择器过滤正确的结果（见上面的小提琴>>选择日期）。谢谢！
-
@angel.bonev 我不希望再包含另一个库，因为它可以用普通的 JS / jQuery 完成（除非有很好的理由）
-
@NicoF 我明白了，但是用选择器搜索不是很快，管理起来会很困难
标签： jquery filter date-range