本文详细阐述了如何使用原生javascript实现动态计数并根据数值条件性地隐藏或显示元素。通过选择器获取元素数量，判断计数结果，并利用textcontent更新内容及hidden属性控制元素的可见性，有效优化了用户界面，避免了零值信息的冗余展示。文章还提供了代码示例和最佳实践，确保代码的健壮性和可维护性。
引言：动态计数与UI优化
在现代Web应用中，动态显示页面上特定元素的数量是一种常见需求。例如，统计购物车中的商品数量、待办事项列表中的未完成任务，或是特定内容分类下的项目总数。通常，我们会通过JavaScript获取这些数量，并将其展示在页面上的某个或其他容器中。然而，当某个类别的数量为零时，继续显示“0”可能会显得冗余，甚至影响用户界面的整洁性。因此，一种常见的优化策略是：当计数结果为零时，自动隐藏对应的显示元素。
核心问题：计数展示与条件隐藏的需求
假设我们有一个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>
对应的JavaScript代码可能如下所示，用于统计并更新的内容：
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时，完全隐藏该元素及其所在的行（如果需要的话，但这里主要关注）。
解决方案：使用原生JavaScript实现条件隐藏
为了实现当计数为零时隐藏元素，我们需要在获取计数并更新内容后，增加一个条件判断。这里，我们将采用原生JavaScript（Vanilla JS）来完成，避免混用不同库的选择器，以提高代码一致性和性能。
步骤一：元素计数
使用document.querySelectorAll()方法可以获取所有匹配指定CSS选择器的元素列表（NodeList），然后通过.length属性即可得到元素的数量。
const numNew = document.querySelectorAll('.new').length;
这里我们使用了const来声明变量，这是现代JavaScript中推荐的做法，因为它表示变量一旦赋值就不会再改变。
步骤二：获取目标显示元素
通过document.querySelector()方法（或document.getElementById()）获取我们希望显示计数结果的元素。
const outputSpan = document.querySelector('#numNewOutput');
同样，使用const来声明。
步骤三：条件判断与内容更新
在获取到计数和目标元素后，我们需要进行条件判断：
- 如果计数大于零，则更新的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');
});
将这段JavaScript代码放在页面的底部或使用DOMContentLoaded事件监听器包裹，以确保在DOM完全加载后再执行。
最佳实践与注意事项
- 避免混用选择器： 在一个项目中，尽量保持选择器库的一致性。如果使用原生JavaScript，就坚持使用document.querySelectorAll()、document.querySelector()等；如果使用jQuery，就统一使用$。混用可能导致不必要的性能开销和维护困难。
- const和let替代var： 在现代JavaScript开发中，推荐使用const和let来声明变量。const用于声明常量（不可重新赋值），let用于声明块级作用域变量。var是函数作用域，可能导致变量提升和意外行为。
- textContent的优势： 当你只需要设置或获取元素的纯文本内容时，优先使用element.textContent而不是element.innerHTML。textContent更安全，因为它不会解析HTML字符串，从而防止XSS攻击。同时，在处理纯文本时，textContent的性能通常也优于innerHTML。
- 语义化隐藏： 使用element.hidden = true;是一种语义化的隐藏方式，它直接告诉浏览器该元素不应被显示。这比手动操作style.display = 'none';更简洁，并且在某些情况下可能对辅助技术（如屏幕阅读器）更友好。
- DOM加载： 确保你的JavaScript代码在DOM完全加载后再执行。最常见的做法是将脚本放在标签的末尾，或者使用DOMContentLoaded事件监听器。
总结
通过上述方法，我们能够优雅地实现Web页面中动态计数元素的条件显示与隐藏。这不仅提升了用户界面的整洁度和用户体验，还通过原生JavaScript的运用，保证了代码的性能和可维护性。遵循现代JavaScript的最佳实践，如使用const/let和textContent，将使你的代码更加健壮和高效。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
