Javascript jQuery读取时显示/隐藏通知

当所有

.activity\u项目

标记为

已读时，我试图显示/隐藏
.notification
指示器。通过单击每个项目的
活动按钮
，或单击
按钮
将所有项目标记为已读，可以将它们标记为已读

使用下面的函数，我尝试识别每个项目是否已收到
读取
状态（获取
.activity\uu按钮--read
类），然后在所有项目都已读取时隐藏通知。这在这里似乎不起作用

当所有项目都已被
读取时，是否有一种有效的方法显示/隐藏通知指示器

分别单击或单击它们
通过单击将全部标记为已读
按钮

$(function() {
    if (!$(".activity__button").not(".activity__button--read").length) {
        $(this).closest(".activity__header").find(".notification").hide();
    } else {
      $(this).closest(".activity__header").find(".notification").show();
    }     });



var open='fas-fa信封open'；
var close=‘fas fa信封’；
$（“.activity_uu按钮[数据状态]”）.off（）.on（'click'，function（）{
var status=$（this.data（'status'）；
如果（状态==“未读”）{
$（this）.data（'status'，'read'）.empty（）.html（''）.addClass（'activity__按钮--read'）；
$（this）.closest（“.activity\uu item”）.addClass（'activity\uu item--read'）；
}否则{
$（this）.data（'status'，'unread'）.empty（）.html（''.removeClass（'activity___按钮--read'）；
$（this）.closest（“.activity\uu item”）.removeClass（'activity\uu item--read'）；
}
});
$（'.mark'）.off（）.on（'click'，function（））{
var status=$（this.data（'status'）；
如果（！status | | status==“未读”）{
$（this）.closest（“.activity\uu header”）.find（“.notification”）.hide（）；
$（this.html（'markall unread'）。数据（'status'，'read'）；
$（“.activity_uu按钮[数据状态]”）。每个（函数（）{
$（this）.data（'status'，'read'）.empty（）.html（''）.addClass（'activity__按钮--read'）；
$（this）.closest（“.activity\uu item”）.addClass（'activity\uu item--read'）；
});
}否则{
$（this.html（'markall read'）。数据（'status'，'unread'）；
$（this）.closest（“.activity\uu header”）.find（“.notification”）.show（）；
$（“.activity_uu按钮[数据状态]”）。每个（函数（）{
$（this）.data（'status'，'unread'）.empty（）.html（''.removeClass（'activity___按钮--read'）；
$（this）.closest（“.activity\uu item”）.removeClass（'activity\uu item--read'）；
$（this）.closest（“.activity\uu header”）.find（“.notification”）.show（）；
});
}
});
$（函数（）{
如果（！$（“.activity\uuu按钮”）.not（“.activity\uu按钮--读取”）.length）{
$（this）.closest（“.activity\uu header”）.find（“.notification”）.hide（）；
}否则{
$（this）.closest（“.activity\uu header”）.find（“.notification”）.show（）；
}
});
.activity\uuu头{
显示器：flex；
}
.活动项目{
位置：相对位置；
高度：100px；
宽度：300px；
边框：1px固体白烟；
页边顶部：-1px；
}
.活动按钮{
光标：指针；
填充：1rem；
字号：21px；
}
.活动按钮svg{
颜色：#f8971d；
}
.activity\uuu按钮.activity\uu按钮--读取svg{
颜色：#47a877；
}
.activity\uuu项--读取{
背景：#fafa！重要；
}
钮扣{
填充：12px；
保证金：1rem；
}
.通知{
宽度：10px；
高度：10px；
边界半径：50%；
背景色：#cb6f74；
颜色：#fff；
字体大小：10px；
字号：600；
}

标记为已读
一种方法是每次更新时检查所有项目的状态

你可以使用这样的函数

function updateNotificationIcon(){
    var $activity_items = $('.activity__item'),
        all_read        = true;

    // Loop through each .activity__item
    $activity_items.each(function(){
        // If item does NOT have the "read" class, set all_read to false
        if(!$(this).hasClass('activity__item--read')){
            all_read = false;
        }
    });

    if(all_read){
        $('.notification').hide();
    }else{
        $('.notification').show();
    }
}

然后，在每次更改项目的“读取”状态后运行该函数

在您的情况下，我会更新您的javascript，如下所示：

var open = 'fas fa-envelope-open';
var close = 'fas fa-envelope';

$(".activity__button[data-status]").off().on('click', function() {
    var status = $(this).data('status');
    if (status == 'unread') {
        $(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
        $(this).closest(".activity__item").addClass('activity__item--read');
    } else {
        $(this).data('status', 'unread').empty().html('<i class="' + close + '"></i>').removeClass('activity__button--read');
        $(this).closest(".activity__item").removeClass('activity__item--read');
    }

    // Add here
    updateNotificationIcon();
});

$('.mark').off().on('click', function() {
    var status = $(this).data('status');
    if (!status || status == 'unread') {
        $(this).closest(".activity__header").find(".notification").hide();
        $(this).html('Mark all unread').data('status', 'read');
        $(".activity__button[data-status]").each(function() {
            $(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
            $(this).closest(".activity__item").addClass('activity__item--read');
        });
    } else {
        $(this).html('Mark all read').data('status', 'unread');
        $(this).closest(".activity__header").find(".notification").show();
        $(".activity__button[data-status]").each(function() {
            $(this).data('status', 'unread').empty().html('<i class="' + close + '"></i>').removeClass('activity__button--read');
            $(this).closest(".activity__item").removeClass('activity__item--read');
            $(this).closest(".activity__header").find(".notification").show();
        });
    }

    // Add here
    updateNotificationIcon();
});
$(function() {
    if (!$(".activity__button").not(".activity__button--read").length) {
        $(this).closest(".activity__header").find(".notification").hide();
    } else {
        $(this).closest(".activity__header").find(".notification").show();
    }
});

function updateNotificationIcon() {
    var $activity_items = $('.activity__item'),
        all_read = true;

    // Loop through each .activity__item
    $activity_items.each(function() {
        // If item does NOT have the "read" class, set all_read to false
        if (!$(this).hasClass('activity__item--read')) {
            all_read = false;
        }
    });

    if (all_read) {
        $('.notification').hide();
    } else {
        $('.notification').show();
    }
}

var open='fas-fa信封open'；
var close=‘fas fa信封’；
$（“.activity_uu按钮[数据状态]”）.off（）.on（'click'，function（）{
var status=$（this.data（'status'）；
如果（状态==“未读”）{
$（this）.data（'status'，'read'）.empty（）.html（''）.addClass（'activity__按钮--read'）；
$（this）.closest（“.activity\uu item”）.addClass（'activity\uu item--read'）；
}否则{
$（this）.data（'status'，'unread'）.empty（）.html（''.removeClass（'activity___按钮--read'）；
$（this）.closest（“.activity\uu item”）.removeClass（'activity\uu item--read'）；
}
//加在这里
updateNotificationIcon（）；
});
$（'.mark'）.off（）.on（'click'，function（））{
var status=$（this.data（'status'）；
如果（！status | | status==“未读”）{
$（this）.closest（“.activity\uu header”）.find（“.notification”）.hide（）；
$（this.html（'markall unread'）。数据（'status'，'read'）；
$（“.activity_uu按钮[数据状态]”）。每个（函数（）{
$（this）.data（'status'，'read'）.empty（）.html（''）.addClass（'activity__按钮--read'）；
$（this）.closest（“.activity\uu item”）.addClass（'activity\uu item--read'）；
});
}否则{
$（this.html（'markall read'）。数据（'status'，'unread'）；
$（this）.closest（“.activity\uu header”）.find（“.notification”）.show（）；
$（“.activity_uu按钮[数据状态]”）。每个（函数（）{
$（this）.data（'status'，'unread'）.empty（）.html（''.removeClass（'activity___按钮--read'）；
$（this）.closest（“.activity\uu item”）.removeClass（'activity\uu item--read'）；
$（this）.closest（“.activity\uu header”）.find（“.notification”）.show（）；
});
}
//加在这里
updateNotificationIcon（）；
});
$（函数（）{
如果（！$（“.activity\uuu按钮”）.not（“.activity\uu按钮--读取”）.length）{
$（this）.closest（“.activity\uu header”）.find（“.notification”）.hide（）；
}否则{
$（this）.closest（“.activity\uu header”）.find（“.notification”）.show（）；
}
});
函数updateNotificationIcon（）{
变量$activity\u items=$（'.activity\u items'），
全部读取=正确；
//循环浏览每个.activity\u项目
$activity_items.每个（函数（）{
//如果项没有“read”类，则将all_read设置为false
if（！$（this）.hasClass（'activity\u item--read'））{
全部读取=错误；
}
});
如果（全部读取）{
$（'.notif