阿里巴巴矢量圖標(biāo)庫(kù)批量添加圖標(biāo)

平時(shí)找圖標(biāo)用的最多的就是阿里巴巴矢量圖標(biāo)庫(kù)。但在阿里巴巴矢量圖標(biāo)庫(kù)將一個(gè)庫(kù)的圖標(biāo)加入購(gòu)物車很麻煩。就比如手機(jī)淘寶圖標(biāo)庫(kù)這個(gè)庫(kù)，總共有$434$個(gè)圖標(biāo)，如果手動(dòng)一個(gè)個(gè)添加進(jìn)購(gòu)物車，費(fèi)時(shí)又費(fèi)力，吃力不討好。

那么有沒有好一點(diǎn)的辦法呢？

經(jīng)過我觀察發(fā)現(xiàn)，每個(gè)icon中添加進(jìn)購(gòu)物車的元素的class屬性中都包含$“icon?gouwuche1”$這個(gè)值。

我們可以通過getElementsByClassName方法找出所有icon的加入購(gòu)物車選項(xiàng)，再讓每個(gè)選項(xiàng)都調(diào)用click方法，這樣即可實(shí)現(xiàn)批量添加一個(gè)庫(kù)的圖標(biāo)到購(gòu)物車的功能。

代碼如下：

let iconList = document.getElementsByClassName('icon-gouwuche1'); for(let i = 0,length = iconList.length;i < length;i++){let iconItem = iconList[i];setTimeout(function(){//延時(shí)操作防止頁面卡死iconItem.click();},i); }

如下圖，這個(gè)庫(kù)中$434$個(gè)icon都加入到購(gòu)物車中了。

總結(jié)

以上是生活随笔為你收集整理的阿里巴巴矢量图标库批量添加图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。