jQuery延迟切换Class/removeClass/addClass

jQuery toggleClass/removeClass/addClass with delay

本文关键字：removeClass addClass Class 延迟 jQuery 更新时间：2023-09-26

我正在尝试使用jQuery，这对我来说总是一场噩梦。

我有4个不同的下拉菜单，在单击元素时添加了一个类。我正在尝试使用jQuery来检查是否有任何下拉菜单具有开放类，如果是，则删除它并延迟将开放类添加到单击的其他元素。

<div class="parent-container">
                    <img src="http://www.placehold.it/263x263" alt="#" class="img-responsive">
                    <hr>
                    <i class="fa fa-arrow-down fa-lg xbox-toggle"></i>
                </div>
                <ul class="xbox-container">
                    <li class="price-single">
                        <img src="http://www.placehold.it/200x200" alt="#">
                        <h4>Title</h4>
                        <p>£39.99</p>
                    </li>
                    <li class="price-single">
                        <img src="http://www.placehold.it/200x200" alt="#">
                        <h4>Title</h4>
                        <p>£39.99</p>
                    </li>
                    <li class="price-single">
                        <img src="http://www.placehold.it/200x200" alt="#">
                        <h4>Title</h4>
                        <p>£39.99</p>
                    </li>
                </ul>
            </div> <!-- end col -->
            <div class="col-lg-3">
                <div class="parent-container">
                    <img src="http://www.placehold.it/263x263" alt="#" class="img-responsive">
                    <hr>
                    <i class="fa fa-arrow-down fa-lg playstation-toggle"></i>
                </div>
                <ul class="playstation-container">
                    <li class="price-single">
                        <img src="http://www.placehold.it/200x200" alt="#">
                        <h4>Title</h4>
                        <p>£39.99</p>
                    </li>
                    <li class="price-single">
                        <img src="http://www.placehold.it/200x200" alt="#">
                        <h4>Title</h4>
                        <p>£39.99</p>
                    </li>
                    <li class="price-single">
                        <img src="http://www.placehold.it/200x200" alt="#">
                        <h4>Title</h4>
                        <p>£39.99</p>
                    </li>
                </ul>
            </div> <!-- end col -->
$('.xbox-toggle').click(function() {
  $('ul.xbox-container').toggleClass('price-cont-open');
  if($('ul.playstation-container').hasClass('price-cont-open')){
    $('ul.playstation-container').removeClass('price-cont-open');
    $('ul.xbox-container').addClass('price-cont-open').delay(1000);
  };
});

这是一个使用jQuery.Deferred()的基本示例，类似于Promise ES6规范的jQuery实现。

因此，希望它能有所帮助：看看self.sleep方法，以及它如何与promise链结合工作。。。

function ExampleCtrl($) {
  var self = this;
  
  self.ACTIVE_CLASS = 'active';
  self.list = $('.example');
  self.items = $('> li', self.list);
  self.sleep = function(ms) {
    ms = ms || 1000;
    var deferred = $.Deferred();
    
    window.setTimeout(function() {
      deferred.resolve();
    }, ms);
    
    return deferred.promise();
  };  
  self.items.click(function(event) {
    event.preventDefault();
    var current = $(this);
    
    return $
      .when(current.toggleClass(self.ACTIVE_CLASS))
      .then(function() {
        return self.sleep(3000);
      })
      .then(function() {
        return current.next();
      })
      .then(function(sibling) {
        return sibling.toggleClass(self.ACTIVE_CLASS);
      })
    ;
  });
}
jQuery(document).ready(ExampleCtrl);

.active {
  background-color: lightseagreen;
}
ul {
  display: block;
  margin: 0;
  padding: 0;
}
li {
  display: block;
  padding: .5em 1.5em;
  text-transform: uppercase;
  transition: 150ms all linear;
  background: lightcoral;
  margin: 2px 0;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="example">
  <li class="active">Item 1</li>
  <li class="">Item 2</li>
  <li class="">Item 3</li>
  <li class="">Item 4</li>
  <li class="">Item 5</li>
  <li class="">Item 6</li>
  <li class="">Item 7</li>
  <li class="">Item 8</li>
  <li class="">Item 9</li>
</ul>