<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>

对应的J*aScript代码可能如下所示，用于统计并更新的内容：

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

var numNewfilm = document.querySelectorAll('.newfilm').length;
document.getElementById('numNewfilmOutput').innerHTML = numNewfilm;

这种方法可以正确显示计数，但如果numNew或numNewfilm的值为0，对应的仍然会显示“0”。我们的目标是，当计数为0时，完全隐藏该元素及其所在的行（如果需要的话，但这里主要关注）。

解决方案：使用原生J*aScript实现条件隐藏

为了实现当计数为零时隐藏元素，我们需要在获取计数并更新内容后，增加一个条件判断。这里，我们将采用原生J*aScript（Vanilla JS）来完成，避免混用不同库的选择器，以提高代码一致性和性能。

步骤一：元素计数

使用document.querySelectorAll()方法可以获取所有匹配指定CSS选择器的元素列表（NodeList），然后通过.length属性即可得到元素的数量。

const numNew = document.querySelectorAll('.new').length;

这里我们使用了const来声明变量，这是现代J*aScript中推荐的做法，因为它表示变量一旦赋值就不会再改变。

步骤二：获取目标显示元素

通过document.querySelector()方法（或document.getElementById()）获取我们希望显示计数结果的元素。

const outputSpan = document.querySelector('#numNewOutput');

同样，使用const来声明。

阿里妈妈推出的AI电商营销工具

步骤三：条件判断与内容更新

在获取到计数和目标元素后，我们需要进行条件判断：

• 如果计数大于零，则更新的textContent为计数结果。
• 如果计数为零，则设置的hidden属性为true，使其隐藏。

textContent属性用于设置或获取元素的文本内容，相比innerHTML，它更安全且在处理纯文本时性能更好。hidden属性是HTML5引入的一个布尔属性，当设置为true时，元素将从渲染树中移除，等同于display: none;。

以下是实现这一逻辑的示例代码：

const numNew = document.querySelectorAll('.new').length;
const outputSpan = document.querySelector('#numNewOutput');

if (numNew) { // 当numNew不为0时，这个条件为真
  outputSpan.textContent = numNew;
} else {
  outputSpan.hidden = true; // 隐藏span元素
}

这个逻辑简洁高效，能够完美实现我们的需求。

处理多个计数项的优化策略

在实际应用中，我们通常会有多个类似的计数需求。手动为每个计数项编写上述三步代码会显得重复且难以维护。我们可以将这个逻辑封装成一个函数，以便复用。

封装为函数

创建一个函数，接受目标div的类名和目标span的ID作为参数，然后执行计数和条件隐藏的逻辑。

/**
 * 根据指定类名的元素数量，更新并条件隐藏目标span元素。
 * @param {string} className 要计数的div元素的类名。
 * @param {string} outputId 结果将显示和隐藏的span元素的ID。
 */
function updateAndHideIfZero(className, outputId) {
  const count = document.querySelectorAll(`.${className}`).length;
  const outputSpan = document.querySelector(`#${outputId}`);

  if (!outputSpan) {
    console.warn(`未找到ID为 '${outputId}' 的输出元素。`);
    return;
  }

  if (count) {
    outputSpan.textContent = count;
    outputSpan.hidden = false; // 确保如果之前被隐藏，现在能显示
  } else {
    outputSpan.hidden = true;
  }
}

// 调用函数处理不同的计数项
document.addEventListener('DOMContentLoaded', () => {
  updateAndHideIfZero('new', 'numNewOutput');
  updateAndHideIfZero('newfilm', 'numNewfilmOutput');
  updateAndHideIfZero('newnonfictionfilm', 'numNewnonfictionfilmOutput');
  updateAndHideIfZero('newepisode', 'numNewepisodeOutput');
  updateAndHideIfZero('newnonfictionepisode', 'numNewnonfictionepisodeOutput');
  updateAndHideIfZero('newshort', 'numNewshortOutput');
});

将这段J*aScript代码放在页面的底部或使用DOMContentLoaded事件监听器包裹，以确保在DOM完全加载后再执行。

最佳实践与注意事项

1. 避免混用选择器： 在一个项目中，尽量保持选择器库的一致性。如果使用原生J*aScript，就坚持使用document.querySelectorAll()、document.querySelector()等；如果使用jQuery，就统一使用$。混用可能导致不必要的性能开销和维护困难。
2. const和let替代var： 在现代J*aScript开发中，推荐使用const和let来声明变量。const用于声明常量（不可重新赋值），let用于声明块级作用域变量。var是函数作用域，可能导致变量提升和意外行为。
3. textContent的优势： 当你只需要设置或获取元素的纯文本内容时，优先使用element.textContent而不是element.innerHTML。textContent更安全，因为它不会解析HTML字符串，从而防止XSS攻击。同时，在处理纯文本时，textContent的性能通常也优于innerHTML。
4. 语义化隐藏： 使用element.hidden = true;是一种语义化的隐藏方式，它直接告诉浏览器该元素不应被显示。这比手动操作style.display = 'none';更简洁，并且在某些情况下可能对辅助技术（如屏幕阅读器）更友好。
5. DOM加载： 确保你的J*aScript代码在DOM完全加载后再执行。最常见的做法是将脚本放在标签的末尾，或者使用DOMContentLoaded事件监听器。

总结

通过上述方法，我们能够优雅地实现Web页面中动态计数元素的条件显示与隐藏。这不仅提升了用户界面的整洁度和用户体验，还通过原生J*aScript的运用，保证了代码的性能和可维护性。遵循现代J*aScript的最佳实践，如使用const/let和textContent，将使你的代码更加健壮和高效。