Question

你好我已经制作了一个模态并添加了一个关闭按钮，所以当它点击时它会向模态添加一个类触发结束模态动画然后我尝试再次删除该类但它什么都不做

这是我的代码

$('.close').on('click', function(){
$(this)
  .parent().addClass("closing")
  .delay(3250)
  .queue(function() {
     $(this).parent().removeClass('closing');
     $(this).parent().removeClass('open');
     $(this).dequeue();
 });
});

我添加了一个控制台日志，以查看.delay是否有效，并且似乎无法找到从

中删除类的正确元素

Answer 1

由于链接，.queue()中的此变量将引用.close元素的父级。

$('.close').on('click', function () {
    $(this) // Initial element.
        .parent().addClass("closing") // this refers  to$(this).parent()
        .delay(3250)
        .queue(function () {
        $(this).parent().removeClass('closing'); // This refers to $(this).parent().parent()
        $(this).parent().removeClass('open');
        $(this).dequeue();
    });
});

<强>解决方案

＆＃13;

  $('.close').on('click', function() {

    $(this).parent().addClass("closing")
      .delay(3250)
      .queue(function() {
        $(this).removeClass('open closing').dequeue();
      });
  });

＆＃13;

    .closing {
      background: red;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <button class="close">Close</button>
</div>

＆＃13;

Answer 2

当你看到自己在事件处理程序中多次编写$(this)时，你应该将该对象缓存为变量以提高效率，以最大限度地减少函数调用，并使代码更易于阅读

新的命名变量可以让您更容易确切地知道当您开始进入其他this上下文时您存储的元素，这也是您现在正在发生的事情。在你的情况下，你有一个this元素，然后在队列内部回调this指的是初始元素的父母，这让你感到困惑。

简单修复...缓存对父级的引用。

$('.close').on('click', function () {

    var $parent = $(this).parent();

    $parent.addClass("closing")
           .delay(3250)
           .queue(function () {
               $parent.removeClass('open closing').dequeue();    
            });
});

在这种情况下，您真正想要缓存的是父

jquery .delay（）没做的事

2 个答案: