javascript - 如何最好地在 js 上对产品进行排序？

Question

我有这段代码，但它不能正常工作。

let productBox = document.querySelectorAll('.product');
let selectCategory = document.querySelector('#select-category');
let categoryVal = document.querySelectorAll('#select-category option');

selectCategory.addEventListener('change', () => {
    Array.prototype.forEach.call(categoryVal, catItem => {
        Array.prototype.forEach.call(productBox, prodItem => {
            if((catItem.selected) && (prodItem.category === 
            catItem.category)) {
                prodItem.style.display = 'none'
            }
        })
    })
})

.product {
  border: 1px solid;
  padding: 2px;
  margin: .5rem;
}

<select id="select-category">
    <option category="all">All</option>
    <option category="dinner">Dinner</option>
    <option category="first meal">First meal</option>
    <option category="garnish">Garnish</option>
</select>

<div category="dinner" class="product">Dinner</div>
<div category="first meal" class="product">First meal</div>
<div category="garnish" class="product">Garnish</div>

我需要在选择 option 元素时，display none 应用于类别不匹配的 block 。执行此操作的最佳方法是什么？

Answer 1

您的代码中存在许多问题，您的 HTML 无效。

HTML5 中没有定义category 属性。如果你想使用自定义属性，它们应该以 data-* 为前缀.对于 select 选项，您应该只使用 value 属性。

修复后，逻辑只需要是:

1. 如果 select 元素发生变化，则从中获取选定值。
2. 遍历产品 div 元素，并为每个元素:
   • 如果选择的类别是all，或者如果它与元素的data-category相匹配，则将显示样式设置为其默认样式('')
   • 否则将显示样式设置为none。

这是一个完整的片段:

const productDivs = document.querySelectorAll('.product');
const categorySelect = document.querySelector('#select-category');

categorySelect.addEventListener('change', (e) => {
  const category = e.target.value;

  [...productDivs].forEach(pd => {
    const display = pd.dataset.category === category || category === 'all';
    pd.style.display = display ? '' : 'none';
  });
});

<select id="select-category">
  <option value="all">All</option>
  <option value="dinner">Dinner</option>
  <option value="first meal">First meal</option>
  <option value="garnish">Garnish</option>
</select>

<div data-category="dinner" class="product">Dinner</div>
<div data-category="first meal" class="product">First meal</div>
<div data-category="garnish" class="product">Garnish</div>