jquery - jQuery 在两个类之间切换,显示和隐藏
问题描述
我有两节课:
<div class="currentWeather"></div>
<div class="weeklyWeather"></div>
我试图在它们之间切换,所以每 10 秒它会显示其中一个类并隐藏另一个类,依此类推。
setInterval(function(){
$(".currentWeather, .weeklyWeather").toggleClass("currentWeather weeklyWeather");
}, 3000);
但这只是切换类名....切换不是我想要的吗?
解决方案
//CSS Class:
.mask{
display: none;
}
//setInterval callback function to add and remove mask class
setInterval(function(){
//You can check if the element has the class with .hasClass
if($('.currentWeather').hasClass('mask'){
$('.currentWeather').removeClass('mask');
$('.weeklyWeather').addClass('mask');
}else{
$('.currentWeather').addClass('mask');
$('.weeklyWeather').removeClass('mask');
}
//Or you can just .toggleClass
$('.currentWeather').toggleClass('mask');
$('.weeklyWeather').toggleClass('mask');
}, 3000);
//And your HTML would have to have one of these divs with class mask initially
<div class="currentWeather"></div> <div class="weeklyWeather mask"></div>
推荐阅读
- scala - 跨域喷雾不起作用 cors scala
- python - 我可以在没有装饰器功能的情况下运行装饰功能吗?
- swift - 无法推断 Swift 通用参数“T”
- mongodb - 使用 mongodb 配置进行 vernemq 授权
- ios - 在 ios 上运行 nativescript 时出错,但 xcode 运行成功
- java - 如何将以下一段 java 转换为 kotlin?
- pandas - 使用 If-else 更改 Pandas 中的值
- javascript - 使用 window.stop 停止 Promise
- android - 从与 ROOM 上的数组值部分匹配的列中搜索
- react-hook-form - 允许 Downshift useCombobox 选择不在列表中的项目