问答详情
源自:3-7 jQuery的属性与样式之样式操作.css()

用css设置样式,后面跟着的函数到底是什么意思。

用css设置样式,后面跟着的函数到底是什么意思。

提问者:慕码人5999576 2016-11-09 17:09

个回答

  • qq_感谢永远有歌把心境道破_03171663
    2016-11-09 18:34:18
    已采纳

    不知道你哪里不明白,所以我说的详细些。

    $('.sixth').css("width",function(index,value){

                //value带单位,先分解
                value = value.split('px');
                //返回一个新的值,在原有的值上,增加50px
                return (Number(value[0]) + 50) + value[1];
            })

    首先说一下这个回调函数。

    可以看一下w3school中的教程,http://www.w3school.com.cn/jquery/css_css.asp

    这个函数接受两个参数,index 为元素在对象集合中的索引位置,value 是原先的属性值。

    这两个参数都是选填的,如果函数中不需要用到也可以不写,比如css("width",function(){函数主体})。

    然后这两个参数的名字也不是固定的,可以自己命名,比如这样写css("width",function(i,val){函数主体})或者css("width",function(a,b){函数主体}),当然,你不能使用JS自己的保留字来命名,比如in就是保留字,第一个参数你可以用i,ind,inde,index,但是不能用in。

    这个函数是JQUERY提供的,所以只要使用就会自动给index和value提供值。

    index 为元素在对象集合中的索引位置。这里他的对象$('.sixth')是唯一的(class=sixth的div元素)。但在有些情况下class=sixth的div元素可能会有好几个,所以$('.sixth')可以是个div的集合,这时就需要index索引来区别这些div。

    value就是这些div的width属性的值。

    index和value都是一一对应于他们的div元素的。然后这个函数会按照索引index从第一个div(index=0)开始逐个设置他们的value值,楼主可以理解为这个函数会执行好几遍。这是在div元素有多个的情况下。

    然后是这个函数的主体部分。

    function(index,value){

                value = value.split('px');
                return (Number(value[0]) + 50) + value[1];
            }

    这个函数的作用是返回一个值,就是return,令x= (Number(value[0]) + 50) + value[1],就是return x;这个x就是返回的值。

    所以楼主可以这样理解,x=function(index,value){ 函数主体},这样就变成了$('.sixth').css("width",x)。这样就很好理解了吧。

    split是一个自带的函数,作用是分割字符串,JavaScript的教程中应该有讲过的。这里假设width的值value是50px,就是value="50px",那么value=value.split('px')的结果是一个数组("50",""),以px为分界,value[0]="50",value[1]="",这是一个空字符串,因为px后面什么都没有了。

    因为value[0]是字符串类型,所以前面加上一个函数将他转变为整数型,就是number(value[0]) = 50,;然后再加上数字50, (Number(value[0]) + 50);然后再加上value[1],就是(Number(value[0]) + 50) + value[1],这里value[1]是空字符串,就算不加对结果也没有影响。

    然后就返回(Number(value[0]) + 50) + value[1]的值, return (Number(value[0]) + 50) + value[1];


    以上是我个人的理解,我也还是在学JQUERY的学生,有错误的地方请指正,谢谢





  • 慕粉5366927
    2016-11-16 19:37:57

    有个部分理解错误了,竟然说value[0]代表的是(class="six")中的第一个div,你怎么又把后来当成字符串来理解。

  • 78186700
    2016-11-14 16:29:01

    嗦得死内,哟西