javascript - 更新编号使用 JQuery 的 div 元素列表中的类别

Question

我有一个类别列表作为过滤器，如下所示:

<div class='filterbox'>
    <input type="checkbox" name="category[]" value="English"> English(<span id='English'>0</span>)
    <input type="checkbox" name="category[]" value="Math"> Math(<span id='Math'>0</span>)
    <input type="checkbox" name="category[]" value="Chemistry"> Chemistry(<span id='Chemistry'>0</span>)
    <input type="checkbox" name="category[]" value="Geography"> Geography (<span id='Geography'>0</span>)
</div>

我有像这样的展示框

<div class="boxcategory">
    <div id='box1'><div class='categoryClass hidden'>English</div></div>
    <div id='box2'><div class='categoryClass hidden'>English</div></div>
    <div id='box3'><div class='categoryClass hidden'>Math</div></div>
    <div id='box4'><div class='categoryClass hidden'>English</div></div>
    <div id='box5'><div class='categoryClass hidden'>Chemistry</div></div>
    <div id='box6'><div class='categoryClass hidden'>English</div></div>
    <div id='box7'><div class='categoryClass hidden'>Math</div></div>
    <div id='box8'><div class='categoryClass hidden'>Chemistry</div></div>
    <div id='box9'><div class='categoryClass hidden'>Geography</div></div>
</div>

使用 jquery，我想从 boxcategory 类中显示的类别更新 filterbox 跨度中的总数。请指导。

Answer 1

根据主题作为文本内容的 .categoryClass 元素的数量来计算主题

function count (text) {
  return $('.categoryClass').filter((i, el) => el.innerHTML === text).length;
}

for (let subject of ['English', 'Math', 'Chemistry', 'Geography']) {
  $(`#${subject}`).text(count(subject));
}

参见:https://jsfiddle.net/9my7f4qo/

注意:你不需要 jquery。 Vanilla js:https://jsfiddle.net/9my7f4qo/1/