在 jquery 中切换和切换多个类

海森堡

我想在单击某些单元格时添加和切换分类，例如日历时间表。

我尝试了下面的示例代码，但它没有切换每个类。

我想要的结果是通过单击进行如下切换。

null→ classA→ classB→ classC→ null→ classA→

我的示例代码如下

$("#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-indextd 的属性被点击以获得下一堂课。

看下面的代码

$(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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。