JavaScript:列出带计数的唯一属性

Question

我正在网站上列出待售物品，我想有一个侧边栏来过滤这些物品。因此，对于每个属性，在过滤器部分，我希望列出每个唯一的值，并显示该值的数量。

作为一个非常简单的例子，在下面的片段中，列出了四辆车，它们具有车门数量的数据属性。为了让人们按门的数量进行筛选，我需要在侧边栏中显示每个选项，并让他们选中一个。

我的问题是，对于某些属性，我不知道会有什么值。因此，我需要某种方法来遍历每个项，记录该属性的每个唯一值，还需要对每个值的实例进行计数，并将其显示在"；"过滤依据"；侧边栏。

这就是示例中侧边栏的样子：

门：
[]2(2(
[]4(1(
[]5(1(

看起来我可能需要使用.each((和.length((，但我很难将它们组合在一起。一旦选中复选框，我就可以过滤掉项目，但我的问题只是列出所有的过滤选项。

<div class="items-list">
<p class="item" data-doors="2">Ford Mustang</p>
<p class="item" data-doors="5">Nissan Versa</p>
<p class="item" data-doors="4">Honda Civic</p>
<p class="item" data-doors="2">Audi A5</p>
</div>

Answer 1

这设置了一个具有键/值对的对象，键是门的数量，值是门的实例数量。然后，它通过迭代来运行该对象，该迭代将键值对应用于复选框输入。

const createCheckboxes = (dataName) => {
let refobj = {};
$('.items-list .item').each(function() {
let d = $(this).data(dataName);
refobj[d] = refobj[d] ? refobj[d] + 1 : 1;
});
Object.entries(refobj).forEach(set => $('.inputs[data-group="' + dataName + '"]').append(getCheckbox(set, dataName)));
}
const getCheckbox = (data, keyname) => {
const [key, value] = data;
return `
<label>
<input type='checkbox' name='${keyname}[]' class='${keyname}' value='${key}' onclick='testinput(this)' /> ${key} (${value})
</label>`
}
const testinput = (el) => {
console.log('input with class: ' + $(el).attr('class') + '  and value: ' + $(el).val() + ' and name: ' + $(el).attr('name') + ' clicked')
}
createCheckboxes('doors');
createCheckboxes('wheels');

label {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-list">
<p class="item" data-doors="2" data-wheels="4">Ford Mustang</p>
<p class="item" data-doors="5" data-wheels="4">Nissan Versa</p>
<p class="item" data-doors="4" data-wheels="4">Honda Civic</p>
<p class="item" data-doors="2" data-wheels="4">Audi A5</p>
<p class="item" data-doors="1" data-wheels="3">Messerschmitt KR200</p>
</div>
<div class='inputs' data-group="doors">How many doors?</div>
<div class='inputs' data-group="wheels">How many wheels?</div>

Answer 2

最后的filterObj(在下面的代码中(包含您要查找的内容。

const list = document.getElementsByClassName('item');
//Converting HTMLNode list to Array.
const arrList = Array.from(list);
const filterObj = {};
arrList.map(el => {
filterObj[el.dataset.doors] = filterObj[el.dataset.doors] 
? filterObj[el.dataset.doors] + 1 
: 1;
});
console.log(filterObj);

<div class="items-list">
<p class="item" data-doors="2">Ford Mustang</p>
<p class="item" data-doors="5">Nissan Versa</p>
<p class="item" data-doors="4">Honda Civic</p>
<p class="item" data-doors="2">Audi A5</p>
</div>