如何在data-reviews值小于5时隐藏指定类元素？

解决方案思路 #

通过原生JavaScript读取data-reviews属性值，与设定的阈值对比，若评论数小于阈值则隐藏对应的评论区块。

实现代码 #

// 等待DOM加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 自定义评论数阈值，可根据需求修改
    const reviewThreshold = 5;
    // 获取所有包含评论数的元素
    const reviewElements = document.querySelectorAll('.stamped-badge-caption');

    reviewElements.forEach(element => {
        // 将data-reviews属性值转为数字
        const reviewCount = parseInt(element.dataset.reviews, 10);
        // 若评论数小于阈值，隐藏整个评论徽章容器
        if (reviewCount < reviewThreshold) {
            element.closest('.collection-list-badge').style.display = 'none';
            
            // 若仅需隐藏评论数字和徽章的两个span，可替换为以下两行：
            // element.previousElementSibling.style.display = 'none';
            // element.style.display = 'none';
        }
    });
});

代码说明 #

1. DOM加载监听：DOMContentLoaded确保页面DOM完全加载后再执行代码，避免因元素未渲染导致找不到目标节点。
2. 阈值设置：reviewThreshold可以修改为任意你需要的数值（比如3、10等）。
3. 元素遍历与判断：
   • 通过querySelectorAll获取所有带评论数的元素；
   • 使用dataset.reviews读取data-reviews属性值，并用parseInt转为十进制数字；
   • 若评论数小于阈值，通过closest('.collection-list-badge')找到最外层的评论容器，设置display: none隐藏整个区块。
4. 可选方案：如果不需要隐藏整个容器，仅需隐藏评论徽章和数字的两个span，可使用注释里的代码分别操作对应元素。

注意事项 #

如果评论元素是由第三方插件动态生成的，需要确保代码在插件加载完成后执行，或者使用MutationObserver监听DOM变化，在元素生成后再执行判断逻辑。

内容的提问来源于stack exchange，提问作者EAIS-Developer