javascript - 如果少于 3 个 div，则显示其他 div

Question

我正在使用 jquery 淡入多个具有相同类“noti_box”的 div。这些本质上是通知框，用户可以关闭其中一个或所有这些框。我想做的是找到一种方法来补偿封闭的div，通过使用jquery在其位置显示另一个div。

因此，如果显示 3 个通知框/“noti_box”div，并且用户关闭其中之一，我希望 jquery 显示另一个 div，“other_div”来填充关闭的 div 的空间。同样，如果用户关闭 3 个中的 2 个，则应显示 2 个“other_div”，依此类推。

我需要找到一种方法，仅在每个“noti_box”div 淡入后才能执行此操作，因为它们需要大约 2 到 3 秒的时间淡入，因此不希望显示 div 来填补空白，而其他 div 则显示为填充空白div 仍在尝试淡入静止。因此仅当用户关闭 div 时才需要。

这是我目前的代码，希望有人可以帮助并告诉我哪里出了问题

<div class="right_panel_outer">
<div class="right_panel">
    <a href="notifications.php" rel="shadowbox;height=700;width=1100" class="link1"><div class="noti_box"><div class="noti_text"><h4>You have 11 New Messages</h4></div></a><div class="close_box"></div></div>
    <div class="noti_box"><div class="noti_text"><h4>You have 11 New Notifications</h4></div><div class="close_box"></div></div>
    <div class="noti_box"><div class="noti_text"><h4>6 Matters Needing Your Attention</h4></div><div class="close_box"></div></div>
    <div class="noti_box"><div class="noti_text"><h4>3 Insurance Due To Expire Today</h4></div><div class="close_box"></div></div>
    <div class="noti_box"><div class="noti_text"><h4>1 Outstanding Application</h4></div><div class="close_box"></div></div>
    <div class="other_div">HELLO</div>
    <div class="other_div">HELLO</div>
</div>        
</div>


 <script type="text/javascript">
$('.noti_box').each(function(i) {
    $(this).hide().delay(i * 1500).fadeIn(1500);
});

$('.close_box').on('click', function() {
    $(this).closest('.noti_box').fadeOut();
});
</script>

<script>
    $('.other_div').hide();
     if ($('.noti_box').length  < 3) {

                $('.other_div').show("fast");
            }
</script>

Answer 1

我想这可能就是您正在寻找的:

<script type="text/javascript">
$('.noti_box').each(function(i) {
    $(this).hide().delay(i * 1500).fadeIn(1500);
});

$('.close_box').on('click', function() {
    $(this).closest('.noti_box').fadeOut(function() {  //is called once fadeOut completes
        $(".other_div:hidden:first").show() //gets the other divs that are hidden, then selects the first one and shows it
    });
 });
</script>

<script>
     $('.other_div').hide();
 </script>