如果ID变量为0，则隐藏跨度

Question

我已经尝试了很多解决方案，但都不起作用。要么我不知道自己在做什么，要么我的处境很独特。

我有一些span ID，用来计算页面上特定div类的数量。例如：

var numNew = $('.new').length;
document.getElementById('numNewOutput').innerHTML = numNew;

其计数具有类"的div的数目；新的"；对应

<tr style="color:var(--new);"><td><span class="tallynum" id="numNewOutput"></span></td><td class="tallyhead">NEW</td></tr>

这将该值放入跨度中。

这非常有效，但如果值为0，我希望它被隐藏。有多个具有相同类和唯一ID的跨度，它们拉取不同的div计数。这里有一个工作页面(当你点击顶部的"该死的，我看了"时，我正在处理的账单就会出现(：http://rubbersquare.com/watched2023/

其他一些(并非全部(变量是

var numNewfilm = $('.newfilm').length;
document.getElementById('numNewfilmOutput').innerHTML = numNewfilm;
var numNewnonfictionfilm = $('.newnonfictionfilm').length;
document.getElementById('numNewnonfictionfilmOutput').innerHTML = numNewnonfictionfilm;
var numNewepisode = $('.newepisode').length;
document.getElementById('numNewepisodeOutput').innerHTML = numNewepisode;
var numNewnonfictionepisode = $('.newnonfictionepisode').length;
document.getElementById('numNewnonfictionepisodeOutput').innerHTML = numNewnonfictionepisode;
var numNewshort = $('.newshort').length;
document.getElementById('numNewshortOutput').innerHTML = numNewshort;

带有HTML:

<tr style="color:var(--new);"><td><span class="tallynum" id="numNewOutput"></span></td><td class="tallyhead">NEW</td></tr>
<tr style="color:var(--new);"><td><span class="tallynum" id="numNewfilmOutput"></span></td><td class="tallyname">films</td></tr>
<tr style="color:var(--new;)"><td><span class="tallynum" id="numNewnonfictionfilmOutput"></span></td><td class="tallyname">nonfiction films</td></tr>
<tr style="color:var(--new;)"><td><span class="tallynum" id="numNewepisodeOutput"></span></td><td class="tallyname">episodes</td></tr>  
<tr style="color:var(--new;)"><td><span class="tallynum" id="numNewnonfictionepisodeOutput"></span></td><td class="tallyname">nonfiction episodes</td></tr>  
<tr style="color:var(--new;)"><td><span class="tallynum" id="numNewshortOutput"></span></td><td class="tallyname">shorts</td></tr>

Answer 1

如何做到这一点的示例：

const numNew = document.querySelectorAll('.new').length;
const output = document.querySelector('#numNewOutput');
if (numNew) {
output.textContent = numNew;
} else {
output.hidden = true;
}

p.S。请不要将jquery选择器与普通的js选择器混合使用。

并且永远不要使用var