Question

<div class="row">
  <div class="showmessage" style="display:none">you have removed all items</div>
  <div class=" col-sm-4"> data 1 <span class="close">close</span> </div>
  <div class=" col-sm-4"> data 2 </div>
  <div class=" col-sm-4"> data 3 </div>
</div>
<script>
$('.close').click(function(){
$(this).closest('.col-sm-4').slideUp();
});
</script>

我想在用户逐个隐藏所有.showmessage时显示.col-sm-4。此外，它应该在最后一个项目的滑动动画完成后显示。

Answer 1

在零时检查.col-sm-4的计数，使用show

$('.close').click(function(){
   $(this).closest('.col-sm-4').slideUp();
   if (!$('.col-sm-4').length) {
        $('.showmessage').show();
   }
});

Answer 2

您可以使用$('.close:visible').length === 0检查是否还有任何项目已打开。此外，您似乎忘记添加其他关闭按钮。

$('.close').click(function() {
  $(this).closest('.col-sm-4').slideUp(function() {
    if ($('.close:visible').length === 0) {
      $('.showmessage').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="showmessage" style="display:none">you have removed all items</div>
  <div class="col-sm-4">data 1 <button class="close">close</button></div>
  <div class="col-sm-4">data 2 <button class="close">close</button></div>
  <div class="col-sm-4">data 3 <button class="close">close</button></div>
</div>

Answer 3

你的意思是this：

$('.close').click(function(){
    var $parent = $(this).parent();
    $parent.slideUp('fast', function () {
        if(!$(this).siblings('.col-sm-4').is(':visible')) {
            $(this).siblings('.showmessage').show();
        } else {
            $(this).siblings('.showmessage').hide();
        }
    });
});

如果单击时所有div都向上滑动，则显示消息

3 个答案: