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类中显示的类别更新滤镜盒范围内的总数。请指导。

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/

更新号码使用JQuery从div元素列表中的类别

1 个答案: