特效 給元素迴圈新增class

2022-05-04 03:27:06 字數 1048 閱讀 8416

經常會遇到給元素迴圈新增class的效果,例如下面這個圖

每個模組的背景色和圖示都不相同,但是呢,模組的數量又不確定,說不定有幾十個,那我不能設計幾十個圖示吧,所以,可以做成每9個一迴圈,也就是第10個與第1個的樣式相同,第11個與第2個的樣式相同,依次類推。

還有**中也經常遇到:

給**的每一行設定背景色,每5行迴圈一次,**的行數自然也是不確定的。

所以就需要幾行js**,例用for迴圈,給元素迴圈新增class。**很簡單,就是每次寫的時候,總是在迴圈**中除錯,到底是從0開始?還是從1開始?迴圈的結點,是誰減誰?資料怎麼個對應關係?每次都想也比較麻煩,費時間,於是,整理乙份**,以後再遇到直接拿來用就可以啦。 

特意寫了乙個七彩虹背景色的簡單demo

**如下:

html:

css:

.box

.box li

.box1

.box2

.box3

.box4

.box5

.box6

.box7

js:

$(document).ready(function()

one.eq(i-1).addclass(str+j);

};});

vue給元素動態新增class

class 自定義,如果num為true,新增letter class 如果iteme.sel num與iteme.ok num相等,新增letter為true,新增letter class 自定義textindex 如果textindex 與index 相等,新增letter為true,新增let...

原生js新增 刪除元素的class

判斷乙個元素是否有某個class 第一種 function hasclass elements,cname 第二種 element.classlist.contains classname 給元素新增class 第一種方法 首先使用hasclass 判斷是否存在 function addclass ...

給Jquery動態新增的元素新增事件

我想很多人都會向我一樣曾經 被新元素的事件繫結困惑很久也就是 在頁面載入完成後給元素繫結了事件,但又新增加的元素上卻沒有繫結任何事件。js的事件監聽跟css不一樣,css只要設定好了樣式,不論是原來就有的還是新新增的,都有一樣的表現。而事件監聽不是,你必須給每乙個元素單獨繫結事件。常見的例子是處理 ...