點(diǎn)擊添加背景是初步學(xué)習(xí)js時(shí)的知識(shí)，一般來(lái)說(shuō)是比較簡(jiǎn)單的腳本就可以實(shí)現(xiàn)的，但是如果在不同的div上點(diǎn)擊從而給添加不同的div背景那？ 我們初步感受一下這個(gè)頁(yè)面中有著四個(gè)div，只是里面的數(shù)字不同而已

點(diǎn)擊添加背景是初步學(xué)習(xí)js時(shí)的知識(shí)，一般來(lái)說(shuō)是比較簡(jiǎn)單的腳本就可以實(shí)現(xiàn)的，但是如果在不同的div上點(diǎn)擊從而給添加不同的div背景那？

我們初步感受一下這個(gè)頁(yè)面中有著四個(gè)div，只是里面的數(shù)字不同而已，其他的沒(méi)什么不同的；而我們的任務(wù)就是實(shí)現(xiàn)點(diǎn)擊div，div自己就會(huì)添加一個(gè)背景。

如圖，我們點(diǎn)擊了一下1 div，這個(gè)div的背景色從白色變?yōu)槌壬ǔＮ覀冎恍枰粋€(gè)onclick事件就行；但是這里有四個(gè)，難道我們要定義四個(gè)變量？寫(xiě)四個(gè)事件？那么如果有更多的div怎么辦？

就像這種情況，四個(gè)div有著四個(gè)不同的背景，雖然只是背景不同，但是如果用簡(jiǎn)單變量事件那么代碼就會(huì)非常繁瑣和重復(fù)。

下圖是頁(yè)面的架構(gòu)代碼，簡(jiǎn)單的看一下，只是定義了四個(gè)div和在style標(biāo)簽上寫(xiě)出了css樣式，并且沒(méi)有定義背景。

下圖代碼就是我們脫離繁瑣重復(fù)，就可以完成的要求效果（重復(fù)的事情用循環(huán)是一個(gè)非常好的方式），對(duì)于定義數(shù)組存放背景顏色，就不詳細(xì)解釋了，關(guān)鍵是循環(huán)時(shí)的一一對(duì)應(yīng)，用index添加索引對(duì)應(yīng)i以此達(dá)到對(duì)應(yīng)實(shí)現(xiàn)的效果。