如何通过jQuery实现有通知记录时隐藏.message-notif元素的功能

核心逻辑 #

• 统计通知容器内.menu-notif-c类的有效通知项数量
• 通知项数量大于0时隐藏空状态提示，数量为0时显示空状态

实现代码 #

// 封装空状态切换函数，支持后续动态修改通知列表时复用
function toggleEmptyNotif() {
    // 统计当前有效通知条数
    const notifCount = $('.menu-notif-cc .menu-notif-c').length;
    // toggle方法接收布尔值，为true时显示元素，false时隐藏
    $('.message-notif').toggle(notifCount === 0);
}

// 页面DOM加载完成后执行初始化判断
$(document).ready(function() {
    toggleEmptyNotif();
});

补充说明 #

• 如果你的通知列表是通过接口异步拉取渲染的，需要在通知项渲染到DOM之后再调用toggleEmptyNotif()，避免统计数量不准确
• 如果后续有删除通知、新增通知的交互，在操作完成后调用一次toggleEmptyNotif()即可同步更新空状态的显隐
• 若需要自定义显隐的动画效果，可将toggle逻辑替换为分支判断写法：

function toggleEmptyNotif() {
    const notifCount = $('.menu-notif-cc .menu-notif-c').length;
    if (notifCount > 0) {
        $('.message-notif').fadeOut(); // 可替换为自定义动画逻辑
    } else {
        $('.message-notif').fadeIn(); // 可替换为自定义动画逻辑
    }
}

内容的提问来源于stack exchange，提问作者CoreTM