javascript - 在 jquery 中切换和切换多个类
问题描述
我想在单击某些单元格时添加和切换分类,例如日历时间表。
我尝试了下面的示例代码,但它没有切换每个类。
我想要的结果是通过单击切换如下。
null
→<code>classA→<code>classB→<code>classC→<code>null→<code>classA→</p>
我的示例代码如下
$("#our_calendar td")
.click(function() {
$(this).toggleClass('classA classB classC');
});
我想通过创建它的 css 来改变单元格的颜色。
.classA {
background-color: rgb(0,255,0);
}
.classB {
background: linear-gradient(to bottom, yellow 49%,yellow 1%, rgb(0, 255, 0) 1%,rgb(0, 255, 0) 50%);
}
.classC {
background: linear-gradient(to bottom, yellow 49%,yellow 1%, aqua 1%, aqua 50%);
}
如果有人知道这种方法,请告诉我。
谢谢
解决方案
你可以试试下面的逻辑。创建类数组的局部变量。使用data-class-index
td 的属性来获取下一课。
见下面的代码
$(function(){
var classArray = ['classA','classB','classC'];
var arrLen = classArray.length;
$("#our_calendar td").click(function() {
var classIndex = $(this).data('class-index');
$(this).removeClass(classArray[classIndex]);
if(classIndex < (arrLen-1)) {
classIndex++;
} else {
//reset class index
classIndex = 0;
}
$(this).addClass(classArray[classIndex]);
$(this).data('class-index',classIndex);
});
});
.classA {
background-color: rgb(0,255,0);
}
.classB {
background: linear-gradient(to bottom, yellow 49%,yellow 1%, rgb(0, 255, 0) 1%,rgb(0, 255, 0) 50%);
}
.classC {
background: linear-gradient(to bottom, yellow 49%,yellow 1%, aqua 1%, aqua 50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="our_calendar">
<tr><td class="classA" data-class-index="0">Date Value 1</td></tr>
<tr><td class="classA" data-class-index="0">Date Value 2</td></tr>
<tr><td class="classA" data-class-index="0">Date Value 3</td></tr>
</table>
推荐阅读
- r - 有没有办法让数据标签自动填充到我的条形图中?
- swift - 来自同一委托方法的不同按钮操作
- circuit - 是否有所有成员的静音功能?
- unix - 查找模式并通过在其前面添加换行符来替换该模式
- installation - 在 nsis 中使用 2 个欢迎/完成页面图像
- powershell - PowerShell:通过 .bat 脚本打开文件
- html - 可以在 html5 清单中缓存的文件数量是否有限制?
- azure - 带有私有/公共 IP 和 VM 计数条件的 Azure ARM 模板
- javascript - ExpressJs 等到 MongoDB 获取数据并在输出之前循环
- powerapps - MS powerapps 构建的底层框架和编程语言是什么?