[英]Toggle and switch multiple class in jquery
I would like to add and switch classed when clicking on some cells,Like calendar schedule.我想在单击某些单元格时添加和切换分类,例如日历时间表。
I tried sample code below,but it didn't switch each class.我尝试了下面的示例代码,但它没有切换每个类。
My desired result is switching like below by clicking.我想要的结果是通过单击进行如下切换。
null
→ classA
→ classB
→ classC
→ null
→ classA
→ null
→ classA
→ classB
→ classC
→ null
→ classA
→
my sample code is below我的示例代码如下
$("#our_calendar td")
.click(function() {
$(this).toggleClass('classA classB classC');
});
I would like to change cell's color by creating it's css.我想通过创建它的 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%);
}
If someone know this method,please let me know.如果有人知道这种方法,请告诉我。
Thanks谢谢
You can try below logic.您可以尝试以下逻辑。 Create local variable of array of classes.创建类数组的局部变量。 Use data-class-index
attribute for td to be clicked for getting next class.使用data-class-index
属性来点击 td 以获得下一个类。
See below code看下面的代码
$(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>
you have to call toggle for every class.你必须为每个班级调用切换。 Referred from ( Toggle multiple element classes with jQuery )引用自( 使用 jQuery 切换多个元素类)
$("#our_calendar td")
.click(function() {
$(this).toggleClass("classA").toggleClass("classB").toggleClass("classC");
});
working fiddle :工作小提琴:
https://jsfiddle.net/mohammadyaseer/qn2m01fu/4/ https://jsfiddle.net/mohammadyaseer/qn2m01fu/4/
You can modify your jQuery to something like below.您可以将 jQuery 修改为如下所示的内容。
$("#our_calendar td").click(function() {
if ($(this).hasClass("classA")) {
$(this).toggleClass("classA classB");
} else if ($(this).hasClass("classB")) {
$(this).toggleClass("classB classC");
} else if ($(this).hasClass("classC")) {
$(this).toggleClass("classC");
}
});
If you are looking to circulate through the classes, You can use below one如果您想通过课程传播,您可以使用以下一个
$("#our_calendar td").click(function() {
if ($(this).hasClass("classA")) {
$(this).toggleClass("classA classB");
} else if ($(this).hasClass("classB")) {
$(this).toggleClass("classB classC");
} else if ($(this).hasClass("classC")) {
$(this).toggleClass("classC classA");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.