在 jquery 中切换和切换多个类

Question

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

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

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

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%);
}

如果有人知道这种方法，请告诉我。

谢谢

Answer 1

您可以尝试以下逻辑。 创建类数组的局部变量。 使用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>

Answer 2

你必须为每个班级调用切换。 引用自（ 使用 jQuery 切换多个元素类）

 $("#our_calendar td")    
    .click(function() {  
     $(this).toggleClass("classA").toggleClass("classB").toggleClass("classC");
 });

工作小提琴：

https://jsfiddle.net/mohammadyaseer/qn2m01fu/4/

Answer 3

您可以将 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");
  }
});

如果您想通过课程传播，您可以使用以下一个

$("#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");
  }
});