javascript - 检查具有相同类的所有元素是否被隐藏

Question

我有一个简单的问题，我有一个包含所有相同类名的列表，当单击一个时，它会从容器中动画出来然后重定向你等等。它还有一个隐藏按钮，当我隐藏它们时所有，我想让浏览器在它们都被手动隐藏时提醒我，但是，由于列表已经隐藏在页面上，直到单击按钮显示列表，我不确定这是否与我的 jquery 混淆还是不是。

HTML 基本上是这样的 -

<ul class="alertContainer"> <!-- Hidden until button is clicked to show -->
  <li class="alert"> </li>  <!-- each are removed one at a time -->
  <li class="alert"> </li>
  <li class="alert"> </li>
  <li class="alert"> </li>
<ul>

jquery-

 $(document).ready(function() {
 if (!$('.alerts:visible').length === 0)
  alert('all are hidden');

 });

由于网站加载时警报已经隐藏，我认为这是一个问题，但单击按钮时它们会变得可见，然后可以将它们单独置于隐藏状态。我不确定将这段代码放在用于删除警报的代码中是否更好

jquery 单独删除警报 --

 $(document).ready(function() {
$('.alerts').click(function() {
     $(this).animate({ marginLeft: "100%"} , 100);
     $(this).attr("style","overflow-x:visible");

});
});

$(document).ready(function() {
  $('.alerts').click(function() {
     $(this).fadeOut(200);
  });
  });

如果有人能帮助我，我将不胜感激。

Answer 1

看看下面的代码并尝试用它替换上面列出的所有 javascript。

注意严格使用嵌套、使用回调和链接。

$(document).ready(function() {

    $('.alert').click(function(event) {
        $(this).animate({
            marginLeft: "100%"
        }, 100, function() {
            $(this).attr("style","overflow-x:visible");
        }).fadeOut(200, function() {
            if ($(".alertContainer li:visible").length == 0) {
                alert('all are hidden');
            }
        });

    });

});