JavaScript：使用计数列出唯一属性

Question

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

作为一个非常简单的示例，在下面的 sn-p 中，列出了四辆汽车，具有门数的数据属性。为了让人们按门数过滤，我需要在侧边栏中显示每个选项并让他们检查一个。

对我来说问题是，对于一些属性，我不知道提前会有什么值。所以我需要一些方法来遍历每个项目，记录该属性的每个唯一值，并计算每个值的实例，并将其显示在“过滤依据”侧边栏中。

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

门：
[] 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>