如果列表中没有项目（通知），则切换div

Posted 2021-03-31

在我的通知代码中，我试图实现一个空状态div，以显示何时使用.remove__icon删除了所有通知。

问题是，下面的代码不知道.activity__list为空。如何设置检测以知道何时从.activity__item中删除了所有.activity__list，以便可以使用设置的变量显示/隐藏.activity--empty div？

  var hideEmpty = function() {
    $(".activity--empty").hide();
    $(".mark").hide();
  };
  var showEmpty = function() {
    $(".activity--empty").show();
    $(".mark").show();
  };

  if ($(".activity__list").children() < 1) {
    showEmpty();
  } else {
    hideEmpty();
  }

$(document).ready(function() {
  var hideEmpty = function() {
    $(".activity--empty").hide();
    $(".mark").hide();
  };
  var showEmpty = function() {
    $(".activity--empty").show();
    $(".mark").show();
  };

  function updateNotificationIcon() {
    var notify = $(".indicator");
    var $activity_items = $(".activity__button--user[data-status]"),
      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__button--read")) {
        all_read = false;
      }
    });

    if (all_read) {
      notify.addClass("scale-in");
      $(".mark").attr("data-status", "read");
      $(".mark").html("Mark all unread");
    } else {
      notify.removeClass("scale-in");
      $(".mark").attr("data-status", "unread");
      $(".mark").html("Mark all read");
    }
  }

  var open = "";
  var close = "";
  var bigActive = function() {
    $(".activity__button--user[data-status]")
      .off()
      .on("click", function() {
        var status = $(this).attr("data-status");
        if (status == "unread") {
          $(this)
            .attr("data-status", "read")
            .empty()
            .html('<div class="mail__icon"> ' + open + " </div>")
            .addClass("activity__button--read");
          $(this)
            .closest(".activity__item--news")
            .addClass("activity__item--read");
        } else {
          $(this)
            .attr("data-status", "unread")
            .empty()
            .html('<div class="mail__icon"> ' + close + " </div>")
            .removeClass("activity__button--read");
          $(this)
            .closest(".activity__item--news")
            .removeClass("activity__item--read");
        }
        updateNotificationIcon();
      });
    $(".mark")
      .off()
      .on("click", function() {
        var status = $(this).attr("data-status");
        if (!status || status == "unread") {
          $(this).html("Mark all unread").attr("data-status", "read");
          $(".activity__button--user[data-status]").each(function() {
            $(this)
              .attr("data-status", "read")
              .empty()
              .html('<div class="mail__icon"> ' + open + " </div>")
              .addClass("activity__button--read");
            $(this)
              .closest(".activity__item--news")
              .addClass("activity__item--read");
          });
        } else {
          $(this).html("Mark all read").attr("data-status", "unread");
          $(".activity__button--user[data-status]").each(function() {
            $(this)
              .attr("data-status", "unread")
              .empty()
              .html('<div class="mail__icon"> ' + close + " </div>")
              .removeClass("activity__button--read");
            $(this)
              .closest(".activity__item--news")
              .removeClass("activity__item--read");
          });
        }
        updateNotificationIcon();
      });
  };
  $(".remove__icon").on("click", function() {
    var item = $(this).closest(".activity__item");
    var button = $(this)
      .closest(".activity__item")
      .find(".activity__button[data-status]");
    button.addClass("activity__button--read");
    item.addClass("activity__item--read");
    button.attr("data-status", "read");
    item.hide(400, function() {
      item.remove();
    });
    updateNotificationIcon();
  });
  if ($(".activity__list").children() < 1) {
    showEmpty();
  } else {
    hideEmpty();
  }
  var toggleActive = function() {
    $(this).toggleClass("active");
  };
  $(".activity__button--user").click(bigActive);
  $(".activity__item--news").each(function(i, e) {
    var button = $(this).find(".activity__button--user");
    ranNum = Math.floor(Math.random() * (4 - 2 + 2)) + 1;
    if ((i + 1) % ranNum == 0) {
      bigActive.call(button);
      $(this).find(".activity__button--user").click();
    }
  });
});

.remove__icon,
.mail__icon {
  font-family: 'Font awesome 5 pro solid 900', sans-serif;
}

.activity__button.activity__button--user.w-embed.activity__button--read {
  color: silver;
}

.activity__button--read .mail__icon {
  font-family: 'Font awesome 5 pro 400', sans-serif;
}

.remove__icon {
  padding: 36px;
  cursor: pointer
}

.activity--empty {
  padding: 36px;
  border: 1px solid;
  min-height: 200px;
}

.active {
  background: green
}

.activity__header {
  display: flex;
}

.activity__item {
  font-family: 'Font awesome 5 pro solid 900', sans-serif;
  position: relative;
  display: flex;
  height: 100px;
  width: 300px;
  border: 1px solid whitesmoke;
  margin-top: -1px;
}

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

.activity__button--user>div {
  color: #f8971d;
}

.activity__button--user.activity__button--read>div {
  color: #47a877;
}

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

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

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #cb6f74;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  transform: scale(1);
  transition: all .15s ease-in-out;
}

.indicator.scale-in {
  transform: scale(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-IIED/eyOkM6ihtOiQsX2zizxFBphgnv1zbe1bKA+njdFzkr6cDNy16jfIKWu4FNH" crossorigin="anonymous">

<div>
  <div class="activity__header">
    <button class="mark">Mark as Read</button>
    <div class="indicator"></div>
  </div>
  <div class="activity__list">
    <div class="activity__item activity__item--news">
      <div class="activity__button activity__button--user" data-status="unread">
        <div class="mail__icon"></div>
      </div>
      <div class="remove__icon"></div>
    </div>
    <div class="activity__item activity__item--news">
      <div class="activity__button activity__button--user" data-status="unread">
        <div class="mail__icon"></div>
      </div>
      <div class="remove__icon"></div>
    </div>
    <div class="activity__item activity__item--news">
      <div class="activity__button activity__button--user" data-status="unread">
        <div class="mail__icon"></div>
      </div>
      <div class="remove__icon"></div>
    </div>
    <div class="activity__item activity__item--news">
      <div class="activity__button activity__button--user" data-status="unread">
        <div class="mail__icon"></div>
      </div>
      <div class="remove__icon"></div>
    </div>
    <div class="activity__item activity__item--news">
      <div class="activity__button activity__button--user" data-status="unread">
        <div class="mail__icon"></div>
      </div>
      <div class="remove__icon"></div>
    </div>
  </div>
  <div class="activity--empty">All caught up!</div>
</div>

答案

这里的问题是.hide(400需要400毫秒才能删除该项目，但是您的if条件这次没有等待，因此它可以正常工作，但没有计算已删除的项目

为避免这种情况，请在hide(400 , function(){ remove , if condition})中使用if条件

在下一个代码中，我首先定义了一个名为ToggleShowHideEmpty的函数，然后在hide回调中运行它

$(document).ready(function() {
  var hideEmpty = function() {
    $(".activity--empty").hide();
    $(".mark").hide();
  };
  var showEmpty = function() {
    $(".activity--empty").show();
    $(".mark").show();
  };
  var ToggleShowHideEmpty = function(){
    if ($(".activity__list .activity__item").length < 1) {
      showEmpty();
    } else {
      hideEmpty();
    }
  };
  function updateNotificationIcon() {
    var notify = $(".indicator");
    var $activity_items = $(".activity__button--user[data-status]"),
      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__button--read")) {
        all_read = false;
      }
    });

    if (all_read) {
      notify.addClass("scale-in");
      $(".mark").attr("data-status", "read");
      $(".mark").html("Mark all unread");
    } else {
      notify.removeClass("scale-in");
      $(".mark").attr("data-status", "unread");
      $(".mark").html("Mark all read");
    }
  }

  var open = "";
  var close = "";
  var bigActive = function() {
    $(".activity__button--user[data-status]")
      .off()
      .on("click", function() {
        var status = $(this).attr("data-status");
        if (status == "unread") {
          $(this)
            .attr("data-status", "read")
            .empty()
            .html('<div class="mail__icon"> ' + open + " </div>")
            .addClass("activity__button--read");
          $(this)
            .closest(".activity__item--news")
            .addClass("activity__item--read");
        } else {
          $(this)
            .attr("data-status", "unread")
            .empty()
            .html('<div class="mail__icon"> ' + close + " </div>")
            .removeClass("activity__button--read");
          $(this)
            .closest(".activity__item--news")
            .removeClass("activity__item--read");
        }
        updateNotificationIcon();
      });
    $(".mark")
      .off()
      .on("click", function() {
        var status = $(this).attr("data-status");
        if (!status || status == "unread") {
          $(this).html("Mark all unread").attr("data-status", "read");
          $(".activity__button--user[data-status]").each(function() {
            $(this)
              .attr("data-status", "read")
              .empty()
              .html('<div class="mail__icon"> ' + open + " </div>")
              .addClass("activity__button--read");
            $(this)
              .closest(".activity__item--news")
              .addClass("activity__item--read");
          });
        } else {
          $(this).html("Mark all read").attr("data-status", "unread");
          $(".activity__button--user[data-status]").each(function() {
            $(this)
              .attr("data-status", "unread")
              .empty()
              .html('<div class="mail__icon"> ' + close + " </div>")
              .removeClass("activity__button--read");
            $(this)
              .closest(".activity__item--news")
              .removeClass("activity__item--read");
          });
        }
        updateNotificationIcon();
      });
  };
  $(".remove__icon").on("click", function() {
    var item = $(this).closest(".activity__item");
    var button = $(this)
      .closest(".activity__item")
      .find(".activity__button[data-status]");
    button.addClass("activity__button--read");
    item.addClass("activity__item--read");
    button.attr("data-status", "read");
    item.hide(400, function() {
      item.remove();
      ToggleShowHideEmpty();
    });
    updateNotificationIcon();
  });
  var toggleActive = function() {
    $(this).toggleClass("active");
  };
  $(".activity__button--user").click(bigActive);
  $(".activity__item--news").each(function(i, e) {
    var button = $(this).find(".activity__button--user");
    ranNum = Math.floor(Math.random() * (4 - 2 + 2)) + 1;
    if ((i + 1) % ranNum == 0) {
      bigActive.call(button);
      $(this).find(".activity__button--user").click();
    }
  });
});

.remove__icon,
.mail__icon {
  font-family: 'Font awesome 5 pro solid 900', sans-serif;
}

.activity__button.activity__button--user.w-embed.activity__button--read {
  color: silver;
}

.activity__button--read .mail__icon {
  font-family: 'Font awesome 5 pro 400', sans-serif;
}

.remove__icon {
  padding: 36px;
  cursor: pointer
}

.activity--empty {
  padding: 36px;
  border: 1px solid;
  min-height: 200px;
}

.active {
  background: green
}

.activity__header {
  display: flex;
}

.activity__item {
  font-family: 'Font awesome 5 pro solid 900', sans-serif;
  position: relative;
  display: flex;
  height: 100px;
  width: 300px;
  border: 1px solid whitesmoke;
  margin-top: -1px;
}

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

.activity__button--user>div {
  color: #f8971d;
}

.activity__button--user.activity__button--read>div {
  color: #47a877;
}

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

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

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #cb6f74;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  transform: scale(1);
  transition: all .15s ease-in-out;
}

.indicator.scale-in {
  transform: scale(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-IIED/eyOkM6ihtOiQsX2zizxFBphgnv1zbe1bKA+njdFzkr6cDNy16jfIKWu4FNH" crossorigin="anonymous">

<div>
  <div class="activity__header">
    <button class="mark">Mark as Read</button>
    <div class="indicator"></div>
  </div>
  <div class="activity__list">
    <div class="activity__item activity__item--news">
      <div class="activity__button activity__button--user" data-status="unread">
        <div class="mail__icon"></div>
      </div>
      <div class="remove__icon"></div>
    </div>
    <div class="activity__item activity__item--news">&
以上是关于如果列表中没有项目（通知），则切换div的主要内容，如果未能解决你的问题，请参考以下文章
 
 当jquery过滤器没有返回结果时，在div中显示消息
 Android 通知导航到现有活动
 如何将列表视图中的数据从一个片段发送到另一个片段
 如果 SQLite 为空或有记录，则更改片段中的视图
 按下锁定/主页按钮时的通知，单击返回选项卡片段时的通知
 在Android Studio片段之间切换时地图片段不隐藏