[英]Toggle and switch multiple class in 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-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>
你必須為每個班級調用切換。 引用自( 使用 jQuery 切換多個元素類)
$("#our_calendar td")
.click(function() {
$(this).toggleClass("classA").toggleClass("classB").toggleClass("classC");
});
工作小提琴:
您可以將 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");
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.