zoukankan      html  css  js  c++  java
  • jquery实现给循环的每一项加上不同的样式

    项目中需要实现这样的效果,模块中需要展示若干的商品,这些商品的分类名称需要显示不同的背景色,一共提供了三种背景色做选择,

    这样的话就需要用这三种颜色做循环,一开始我的思路是做随机分配颜色,但是这样的话效果不好并且分配不匀;再次想用循环或者遍历的方法但是都走不通;

    最后还是想到了最简单的方法:遍历每一项内容用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>
  • 相关阅读:
    UML常识
    我的一些冒出来的想法
    那些我接触过的软件
    对PL/SQL的认识
    JavaScrip笔记
    万丈高楼平地起
    HTML DOM和JavaScrip的关系
    拾起荒废的英语
    Tomcat文件映射路径
    Access-Control-Allow-Origin
  • 原文地址:https://www.cnblogs.com/moumou0213/p/7181963.html
Copyright © 2011-2022 走看看