Javascript 在jquery中切换和切换多个类

我想在单击某些单元格时添加和切换classed，如日历日程表

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

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

null

→<代码>A类→<代码>类别B→<代码>C类→<代码>空值→<代码>A类→

下面是我的示例代码

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

如果有人知道这个方法，请让我知道

---

谢谢

您可以尝试以下逻辑。创建类数组的局部变量。使用要单击的td的

数据类索引

属性获取下一个类

请参阅下面的代码

$（函数（）{
var classArray=['classA'，'classB'，'classC']；
var arrLen=classArray.length；
$（“#我们的日历td”）。单击（函数（）{
var classIndex=$（this）.data（'class-index'）；
$（this.removeClass（classArray[classIndex]）；
如果（分类指数<（arrLen-1））{
classIndex++；
}否则{
//重置类索引
classIndex=0；
}
$（this.addClass（classArray[classIndex]）；
$（此）.data（'class-index'，classIndex）；
});
});
.classA{
背景色：rgb（0255,0）；
}
.B类{
背景：线性梯度（底部，黄色49%，黄色1%，rgb（0，255，0）1%，rgb（0，255，0）50%）；
}
.C类{
背景：线性梯度（至底部，黄色49%，黄色1%，浅绿色1%，浅绿色50%）；
}

日期值1
日期值2
日期值3
您可以尝试以下逻辑。创建类数组的局部变量。使用要单击的td的
数据类索引
属性获取下一个类

请参阅下面的代码


$（函数（）{
var classArray=['classA'，'classB'，'classC']；
var arrLen=classArray.length；
$（“#我们的日历td”）。单击（函数（）{
var classIndex=$（this）.data（'class-index'）；
$（this.removeClass（classArray[classIndex]）；
如果（分类指数<（arrLen-1））{
classIndex++；
}否则{
//重置类索引
classIndex=0；
}
$（this.addClass（classArray[classIndex]）；
$（此）.data（'class-index'，classIndex）；
});
});
.classA{
背景色：rgb（0255,0）；
}
.B类{
背景：线性梯度（底部，黄色49%，黄色1%，rgb（0，255，0）1%，rgb（0，255，0）50%）；
}
.C类{
背景：线性梯度（至底部，黄色49%，黄色1%，浅绿色1%，浅绿色50%）；
}

日期值1
日期值2
日期值3
您必须为每个类调用toggle。引用自（）

工作小提琴：

您必须为每个类调用toggle。引用自（）

工作小提琴：

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

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

相同的想法相同的想法将在第一次单击时添加所有类，如果没有类，则在第二次单击时删除所有类，但在第一次单击时删除现有类，反之亦然。这对问题OP不起作用has@BhushanKawadkar. 我已经创建了一个小提琴，它的工作很好，请检查，谢谢你的意见在a类和B类之间切换，而不使用C类。勾选问题，显示classA到classB到classC到Null这将在第一次单击时添加所有类，如果没有类，则在第二次单击时删除所有类，但在第一次单击时删除现有类，反之亦然。这对问题OP不起作用has@BhushanKawadkar. 我已经创建了一个小提琴，它的工作很好，请检查，谢谢你的意见在a类和B类之间切换，而不使用C类。检查问题，它说classA到classB到classC到Null谢谢，它似乎工作得很好！每节课都可以传阅吗？我猜如果类索引=4，它将被设置为0，对吗？@Heisenberg我不是最初的回答者，但你可以用
classIndex=（classIndex+1）%classArray.length替换
classIndex++
。如果您最后这样做了，还可以删除if语句。我们可以在else子句中重置索引。请查看更新的答案谢谢，看起来效果不错！每节课都可以传阅吗？我猜如果类索引=4，它将被设置为0，对吗？@Heisenberg我不是最初的回答者，但你可以用
classIndex=（classIndex+1）%classArray.length替换
classIndex++
。如果您最后这样做了，还可以删除if语句。我们可以在else子句中重置索引。请检查更新的答案