1、獲取花瓣,所有調色條,以及用來顯示rgb值的div盒子。
2、給花瓣循環綁定點擊事件,這裏需要壹個匿名的自調用函數來儲存i的值,不然事件綁定不上,i值會變為最終長度值。
3、利用"排他思想"循環遍歷將所有花瓣的selected類名去掉,然後給當前點擊的花瓣添加被選中的類名"selected"將邊框變為虛線,表示被選中。
4、下面壹個for循環同樣利用了匿名的自調用函數存儲i值,然後給所有的調色條綁定input事件。
5、判斷壹下是否有被選中的元素,通過判斷之後獲取帶有selected類名的花瓣,然後將其背景顏色改為三個input輸入的value值,最後將三個rgb值渲染到顯示rgb值的div盒子中,這樣壹個彩色花瓣的效果就完成了。