標籤:his back 項目 簡單的 blog 遍曆 並且 說明 顏色
項目中需要實現這樣的效果,模組中需要展示若干的商品,這些商品的分類名稱需要顯示不同的背景色,一共提供了三種背景色做選擇,
這樣的話就需要用這三種顏色做迴圈,一開始我的思路是做隨機分配顏色,但是這樣的話效果不好並且分配不勻;再次想用迴圈或者遍曆的方法但是都走不通;
最後還是想到了最簡單的方法:遍曆每一項內容用if語句來判斷,主要的思路就是擷取每一商品模組的index跟3相除的餘數來分配對應的顏色(如果是四種顏色的話除以4)。
直接用一個簡單的小案例來說明:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> .color0{ background: red; } .color1{ background: blue; } .color2{ background: pink; } </style></head><body> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> <li>項目5</li> <li>項目6</li> <li>項目7</li> <li>項目8</li> </ul> <script src="jquery-1.7.2.min.js"></script> <script> $(‘ul li‘).each(function() { var num = $(this).index(); var rem = num % 3; if (rem == 0) { $(this).addClass(‘color0‘); } else if(rem == 1) { $(this).addClass(‘color1‘); } else if(rem == 2) { $(this).addClass(‘color2‘); }; }); </script></body></html>
jquery實現給迴圈的每一項加上不同的樣式