Question

在我的应用程序中，用户单击删除按钮可从列表中删除项目。当最后一项被删除时，它应该显示一条消息，表示没有更多项目。我的代码删除了项目，但在最后一项之后，它不会显示消息。那是为什么？

Jquery的：

var optionLinkBox = $('.option-lnk');

optionLinkBox.delegate('.um-delete-lnk', 'click', function(e){
    var thisElem = $(this);

    thisElem.closest('li').fadeTo(400, 0, function(){
        $(this).slideUp(400, function(){
            $(this).remove();
        });

        if($('.um-card-detail li').length < 1){
            // Message to show after the last item
            $('section:first').text('You don\'t have any payment card saved.');
        }
    });

    e.preventDefault();
});

HTML：

<section>
  <ul class="um-card-detail">        
    <li class="um-card-li">
      <h3>Your card <small>(This is your default card)</small></h3>
      <div class="option-lnk">
        <a href="#">Edit</a> | <a href="#" class="um-delete-lnk">Delete</a>
      </div>

      <h3>Some payment details</h3>
    </li>

    <li class="um-card-li">
      <h3>Your card</h3>
      <div class="option-lnk">
        <a href="#">Edit</a> | <a href="#" class="um-delete-lnk">Delete</a>
      </div>

      <h3>Some payment details</h3>
    </li>
  </ul>
</section>

Answer 1

我认为即使在删除最后一个li元素之前也会执行检查（因为在fadeIn的回调中删除了元素）。

将检查最后一个li的代码移动到fadeIn方法的回调中，它会起作用。

试试这个：

var optionLinkBox = $('.option-lnk');

optionLinkBox.delegate('.um-delete-lnk', 'click', function(e){
var thisElem = $(this);

thisElem.closest('li').fadeTo(400, 0, function(){
    $(this).slideUp(400, function(){
        $(this).remove();
        if($('.um-card-detail li').length < 1){
            // Message to show after the last item
            $('section:first').text('You don\'t have any payment card saved.');
        }
    });
});

e.preventDefault();
});

Answer 2

这是因为以下内容：

    if($('.um-card-detail li').length < 1){
        // Message to show after the last item
        $('section:first').text('You don\'t have any payment card saved.');
    }

在删除最后一项之前执行：

$(this).slideUp(400, function(){
    $(this).remove();
});

提供给slideUp方法的函数回调将在幻灯片操作完成后执行，并且当前函数返回后是400毫秒之后，你应该将if语句放在回调中。

    $(this).slideUp(400, function(){
        $(this).remove();
        if($('.um-card-detail li').length < 1){
            // Message to show after the last item
            $('section:first').text('You don\'t have any payment card saved.');
        }
    });

Answer 3

原因是你有$（this）.remove（）;包含在slideUp（）函数内部，执行时需要400毫秒。您的IF语句不会等待slideUp完成执行。要实现这一点，请将语句放在slideUp回调中，如下所示：

$(this).slideUp(400, function(){
    $(this).remove();
}, function() {
    if($('.um-card-detail li').length < 1){
        // Message to show after the last item
        $('section:first').text('You don\'t have any payment card saved.');
    }
});

如何使用jquery列表中没有其他项目时显示消息

3 个答案: