jquery - 如何让 jQuery 多个 addClass 按我喜欢的顺序工作？

Question

$(document).ready(function() {
    $('.tlist td div').click(function () {
        $(this).addClass('first').addClass('second').addClass('third');                 
    });
});

我想先执行 addClass('first')，然后执行 addClass('second')，最后执行 addClass('third')，但它们总是同时触发，我该怎么办？

Answer 1

您可以使用 setTimeout 来确保仅在前一个类在 DOM 中呈现后才添加下一个类。但它确实看起来有点丑陋。当然，您可以根据需要微调延迟。这是它的样子:

$(document).ready(function() {
  $('#someDiv').click(function() {

    $(this).addClass('first');
    
     setTimeout(function(element) {
        element.addClass('second');
        
        setTimeout(function() {
          element.addClass('third');
        },1, $(this));
     },1, $(this));
  });
});

.first:after {
  content: 'First';
}

.second:after {
  content: 'Second';
}


.third:after {
  content: 'Third';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="someDiv">
 Click me!
</div>