Question

我有这样的情况：

<body class="site pace-done">
   <div class="container fade-in sppb-animated">
      bla bla bla
   </div>
</body>

我想要做的是在“节奏完成”类出现在body类之后向div添加“fade-in sppb-animated”类。只要“速度完成”类没有在体型中显示，就应该删除“fade-in sppb-animated”。怎么样这是JS / Jquery？

我将不胜感激为此提供任何帮助。

Answer 1

我假设您根据服务器上存在的某些逻辑将该类放在正文上（否则这是无用的，而应该使用css选择器）。

所以你可以像我在这个例子中所做的那样做https://jsbin.com/fidolexaja/edit?html,js,console,output

Answer 2

您可以使用在加载整个内容后触发的$(window).load()事件。

$(window).load(function() {
     $('.container').addClass('fade-in sppb-animated');
});

Answer 3

创建一个将添加类

的函数

$(document).on('addClass',function(){ 
 // add class
 }
);

添加一个将删除类

的函数

$(document).on('removeClass',function(){ 
 // remove class
 }
);

现在，您可以抛出一个事件来告诉何时添加/删除类

$(document).trigger('addClass'); // to addClass
$(document).trigger('removeClass'); // to removeClass

Answer 4

根据你的要求，我制作了一个脚本，用于检查正文是否有类更新，如果正文已经完成了类，那么它将更新容器并添加类淡入。这使用setinterval并每1秒检查一次

$(document).ready(function(){
  $('.add').click(function(){
    $('body').addClass('pace-done');
  });

  $('.remove').click(function(){
    $('body').removeClass('pace-done');
  });

  setInterval(function(){
    if ($("body").hasClass("pace-done")) {
      $('.container').addClass('fade-in');
    }else{
      $('.container').removeClass('fade-in');
    }
  },1000);
});

http://codepen.io/ZetCoby/pen/mVXJQK

我还建议你在身体的同时更新容器div，你有某种对身体做某事的js吗？或者你正在使用一些修改身体的外部插件？

加载另一个类后，将类添加到div

4 个答案: