javascript 如何为一个下拉框创建一个动态标签来显示其中的元素数量？

8yoxcaq7 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(118)

这应该是非常简单的，但我真的很难把它放在一起。
简单地说，我在我的网站上有一个侧边栏，有A - Z类别的YouTube系列列表。Here's what it looks like.如果需要，你也可以查看整个here。它现在工作正常，看起来不错，但我想在每个下拉列表中有一个动态计数器的系列数量。所以例如，如果有15个系列在“B”类别中，B旁边会有一个小小的15
我可以只使用HTML来制作静态计数器，但是当你从下拉菜单中过滤掉一些元素时，问题就出现了。
下面是侧边栏的HTML摘录。

<li>
    <label>
        A
        <input type="checkbox">
    </label>  
    <ul>
    </ul>
</li>
<li>
    <label>
        B
        <input type="checkbox">
    </label>    
    <ul class="series-list">
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
        <ol>series...</ol>
    </ul>
</li>

我的想法是创建一个脚本，它会自动接收带有class =“series-list”的ul（将其与其他不相关的ul分开），然后计算其中ol元素的数量。然后通过innerHTML将该数量插入到标签中的字母旁边。
到目前为止，我已经写了很多脚本，但它们什么都不做，这可能是我写过的最不糟糕的一个，尽管它仍然很糟糕。

let dropdowns = document.querySelectorAll('series-list');
var count;

for (let i = 0; i < length.dropdowns; i++) {
    count = dropdowns[i];
    console.log(count);
}

我应该注意到这个脚本显然没有做任何改变，因为它只是控制台记录计数。我只是在测试它在这一点上-我甚至没有接近实际实现它。
在我的辩护中，我最近睡得不多，醒着的大部分时间都花在编码上，所以我的大脑被烧焦了。
任何帮助都很感激。

JavaScript

来源：https://stackoverflow.com/questions/75906517/how-can-you-make-a-dynamic-label-for-a-dropdown-box-that-shows-the-number-of-ele

2条答案

按热度按时间

cngwdvgl1#

我稍微修改了你的HTML，只是把输入放在标签之后：更容易更新innerhtml*

我放回你的确切的html。和修改脚本

count_series();

function count_series() {
  document.querySelectorAll('.series-list').forEach(el => {
    let elToChange = el.previousElementSibling.firstChild;
    let txt = elToChange.textContent.trim().slice(0, 1);
    txt = txt + ' ' + el.children.length;
    elToChange.textContent = txt;
  });

}

<ul class="lists">
  <li>
    <label>
            A
            <input type="checkbox">
        </label>
    <ul class="series-list">
      <li>series...</li>
      <li>series...</li>
    </ul>
  </li>
  <li>
    <label>
            B
            <input type="checkbox">
        </label>
    <ul class="series-list">
      <li>series...</li>
      <li>series...</li>
      <li>series...</li>
      <li>series...</li>
      <li>series...</li>
    </ul>
  </li>
</ul>

赞(0）回复(0）举报 2023-04-04

piztneat2#

试试这样的方法：

document.querySelectorAll(".series-list").forEach(function(ul) {
  ul.previousElementSibling.firstChild.textContent += ul.children.length;
});

<li>
  <label>
        A
        <input type="checkbox">
    </label>
  <ul>
  </ul>
</li>
<li>
  <label>
        B
        <input type="checkbox">
    </label>
  <ul class="series-list">
    <ol>series...</ol>
    <ol>series...</ol>
    <ol>series...</ol>
    <ol>series...</ol>
    <ol>series...</ol>
  </ul>
</li>

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何为一个下拉框创建一个动态标签来显示其中的元素数量？

2条答案

相关问题

热门标签

最新问答