jQuery显示/隐藏通知(如果已读取)

时间:2019-03-29 04:54:26

标签: javascript jquery

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

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

通过

所有项都read时,是否有一种有效的方法显示/隐藏通知指示器
  1. 单独单击或
  2. 通过单击将所有标记为已读 button

    $(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>

数据状态为“已读”?

1 个答案:

答案 0 :(得分:2)

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

您可以使用类似这样的功能

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