加载另一个类后，将类添加到div
[英]Add class to div after another class is loaded
问题描述
I have situation like this: 
我有这样的情况：
<body class="site pace-done">
<div class="container fade-in sppb-animated">
bla bla bla
</div>
</body>
What I want to do, is to add "fade-in sppb-animated" classes to div after "pace-done" class appear in body class. 我想做的是在“ pace-done”类出现在body类中之后，向div中添加“淡入sppb动画”类。 As long as "pace-done" class does not show in body class, "fade-in sppb-animated" should be removed. 只要在主体类别中不显示“ pace-done”类别，就应该删除“淡入sppb动画”。 How to this is JS/Jquery? JS / Jquery怎么了？
I will be gratefull for any help with that. 我将不胜感激。
4 个解决方案
解决方案1
0 2016-01-22 13:04:17
I assume you are putting the class on body based on some logic present on server (else this is useless and rather you should use css selectors) . 我假设您基于服务器上存在的某些逻辑将类放在正文上（否则这是没有用的，而应该使用css选择器）。
so you can do some like i have done in this example https://jsbin.com/fidolexaja/edit?html,js,console,output 所以你可以做一些像我在这个例子中所做的一样https://jsbin.com/fidolexaja/edit?html,js,console,output
解决方案2
0 2016-01-22 13:11:43
You can use $(window).load() event which fires after whole content is loaded. 您可以使用$(window).load()事件，该事件在加载整个内容后触发。
$(window).load(function() {
$('.container').addClass('fade-in sppb-animated');
});
解决方案3
0 2016-01-22 13:17:03
create a function that will add the class 创建一个将添加类的函数
$(document).on('addClass',function(){
// add class
}
);
add a function that will remove the class 添加一个将删除类的函数
$(document).on('removeClass',function(){
// remove class
}
);
Now, you can throw a event to tell when to add/remove class 现在，您可以抛出一个事件来告诉何时添加/删除类
$(document).trigger('addClass'); // to addClass
$(document).trigger('removeClass'); // to removeClass
解决方案4
0 2016-01-22 13:36:05
Based on what you asked I made a script that will check if the body has an update to the class, if body has the class pace-done, it will update container and add the class fade-in. 根据您的要求，我编写了一个脚本，该脚本将检查主体是否对类进行了更新，如果主体具有完成的类，它将更新容器并添加类淡入。 this uses setinterval and checks every 1 second 这使用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 http://codepen.io/ZetCoby/pen/mVXJQK
also I suggest that you update the container div at the same time with the body, do you have some sort of js that does something to the body? 我也建议您与主体同时更新容器div，您是否有某种对主体有作用的js？ or are you using some external plugins that modify the body? 还是您正在使用一些修改车身的外部插件？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.