gpt4 book ai didi

javascript - jQuery 显示/隐藏已读通知

转载 作者:行者123 更新时间:2023-12-01 01:08:16 26 4
gpt4 key购买 nike

当所有 .activity__item 都标记为已读时,我尝试显示/隐藏 .notification 指示器。可以通过单击每个单独项目的 .activity__button 将它们标记为已读,或者单击按钮将所有项目标记为已读。

使用下面的函数,我尝试确定每个项目是否已收到 read 状态(获取 .activity__button--read 类),然后隐藏通知,如果 所有内容均已阅读。这似乎在这里不起作用。

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

  1. 单独点击它们或
  2. 通过单击将所有内容标记为已读按钮

    $(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-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');
}
});

$('.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();
});
}
});
$(function() {
if (!$(".activity__button").not(".activity__button--read").length) {
$(this).closest(".activity__header").find(".notification").hide();
} else {
$(this).closest(".activity__header").find(".notification").show();
}
});
.activity__header {
display: flex;
}

.activity__item {
position: relative;
height: 100px;
width: 300px;
border: 1px solid whitesmoke;
margin-top: -1px;
}

.activity__button {
cursor: pointer;
padding: 1rem;
font-size: 21px;
}

.activity__button svg {
color: #f8971d;
}

.activity__button.activity__button--read svg {
color: #47a877;
}

.activity__item--read {
background: #fafafa !important;
}

button {
padding: 12px;
margin: 1rem;
}

.notification {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #cb6f74;
color: #fff;
font-size: 10px;
font-weight: 600;
}
<script src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="activity__header">
<button class="mark" data-status="unread">Mark as Read</button>
<div class="notification"></div>
</div>
<div>
<div class="activity__item">
<div class="activity__button" data-status="unread"><i class="fas fa-envelope"></i>
</div>
</div>
<div class="activity__item">
<div class="activity__button" data-status="unread"><i class="fas fa-envelope"></i>
</div>
</div>

<div class="activity__item activity__item--read">
<div class="activity__button activity__button--read" data-status="read">
<i class="fas fa-envelope-open"></i>
</div>
</div>
<div class="activity__item">
<div class="activity__button" data-status="unread">
<i class="fas fa-envelope"></i>
</div>
</div>
</div>
</div>

数据状态“已读”`?

最佳答案

一种方法是在每次更新时检查所有项目的状态

你可以使用这样的函数

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();
}
}

关于javascript - jQuery 显示/隐藏已读通知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55410719/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com