码迷,mamicode.com
首页 > 其他好文 > 详细

jq 个性的隔行变色

时间:2016-02-22 00:09:26      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

 
效果图大致这样:
技术分享
  我的html格式部分这样:
/*不过他们都说我的dom结构不太合理,同意。BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/
<div class="pro_detail"> <!-- 列表详细信息 --> <ul> <li>001</li> <li>椰香奶茶</li> <li>¥ 10.00</li> <li>¥ 10.50</li> <li>-5%</li> </ul> </div>

 

下面是JQ代码部分(插入进来变得红红的是啥意思?):

            
            //变色效果
            function oChange(){
                var  oUl = $(".pro_detail ul").length;
                for ( var t =0; t<oUl ;t++){   //原来的颜色
                        $(".pro_detail ul").eq(t).find(‘li‘).eq(3).css({
                            "color" : "blue"
                        });
                        $(".pro_detail ul").eq(t).find(‘li‘).eq(4).css({
                            "color" : "blue"
                        });
                }//for
               for ( var a =0; a<oUl ;a++){                                      
                    var s = Math.floor(a%2)+1;
                    if(s){
                        a = a+2;//隔两个变色
                        $(".pro_detail ul").eq(a).find(‘li‘).eq(3).css({
                            "color" : "red"
                        });
                        $(".pro_detail ul").eq(a).find(‘li‘).eq(4).css({
                            "color" : "red"
                        });

                      }//if
        } //for

   }     

    oChange();

 

对jq还不太熟,用很蹩脚的方法写成了这样,可能要贻笑大方之家。有重复的代码,比如,第三个li和第四个li变色的那个地方,我是直接复制的一样的。但是,现在还不知道怎样优化呢?就先这样吧。大神告诉我说,jq里面循环不要用for,用each比较好?

然后,贴上大神的指导。虽然看得半懂不懂 (●???●)
技术分享
 
 
 
 
 

jq 个性的隔行变色

标签:

原文地址:http://www.cnblogs.com/keytree/p/5205879.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!