在 jquery 中切换和切换多个类答案

【问题标题】：Toggle and switch multiple class in jquery在 jquery 中切换和切换多个类
【发布时间】：2020-04-10 16:56:32
【问题描述】：

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

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

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

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

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

谢谢

【问题讨论】：

与how-to-change-background-color-continuously相同的想法

标签： javascript jquery html css

【解决方案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>

【讨论】：

谢谢，看来效果不错！是否可以循环每个班级？我猜如果类索引=4，它会设置为0，对吧？
@Heisenberg 我不是最初的回答者，但您可以将classIndex++ 替换为classIndex = (classIndex + 1) % classArray.length;。如果你最终这样做了，你也可以删除 if 语句
我们可以在 else 子句中重新设置索引。请检查更新的答案

【解决方案2】：

你必须为每个班级调用 toggle。引用自(Toggle multiple element classes with jQuery)

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

工作小提琴：

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

【讨论】：

这将在第一次单击时添加所有类，如果没有类，则在第二次单击时删除所有类，但它会在第一次单击时删除现有类，反之亦然。这不适用于 OP 的问题
@BhushanKawadkar。我创建了一个小提琴，它的工作正常，请检查，感谢您的意见
它在 classA 和 classB 之间切换，根本不使用 classC。检查问题，它说 classA 到 classB 到 classC 到 null

【解决方案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");
  }
});

【讨论】：