每个相应数据属性的选项卡内的计算项

Question

您能帮我吗？如何计算每个tabcontent具有“ image-item”类的div的数量，并将该数字附加到与该data-id对应的tablinks按钮的html上？像伦敦（2）。巴黎（1）。东京（3）

我在这里有一个简单的例子

https://jsfiddle.net/cz87ph6w/

let handleClick = e => {
  Array.from(document.querySelectorAll(".active"), e => e.classList.remove("active")); // remove `active` class from every elements which contains him.
  e.target.classList.add("active");
  document.querySelector(`div.tabcontent[data-id*="${e.target.dataset.id}"]`).classList.add("active");
};

Array.from(document.getElementsByClassName("tablinks"), btn => btn.addEventListener('click', handleClick, false));

<div class="first-tab-component">
  <div class=" tab">
    <button class="tablinks" data-id="1">London </button>
    <button class="tablinks" data-id="2">Paris</button>
    <button class="tablinks" data-id="3">Tokyo</button>
  </div>
  <div data-id="1" class="tabcontent">
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
  <div data-id="2" class="tabcontent">
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
  <div data-id="3" class="tabcontent">
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="image-item">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
</div>

Answer 1

您可以略微修改循环：

Array.from(document.getElementsByClassName("tablinks"), btn => {
    btn.addEventListener('click', handleClick, false);
    const count = document.querySelectorAll(`div[data-id*="${btn.dataset.id}"] .image-item`).length;
    btn.appendChild(document.createTextNode(` (${count})`));
});

然后您的按钮文本将得到类似的内容：

London (2)
Paris (1)
Tokyo (3)