js第一次点击执行,刷新后就不执行了

JavaScript013

js第一次点击执行,刷新后就不执行了,第1张

引用jQuery的cookie库jquery.cookie.js

<!--这里html的li要区分,这样便于添加完样式,刷新后再把样式还原,所以取了一个特别的值,也可以换成自己的-->

<!--如果是动态生成的更好,赋值动态的id-->

<ul class="multiselect">

<li class="invsible checkbox" id="5W-30"><a title="5W-30" href="/plus/list.php?tid=7&jiyoubiaohao=5W-30">5W-30</a></li>

<li class="invsible checkbox" id="10W-40"><a title="10W-40" href="/plus/list.php?tid=7&jiyoubiaohao=10W-40">10W-40</a></li>

</ul> $(function(){

    $("li").click(function() {

    //绑定点击事件,每次点击要把

        $(this).addClass('act') 

        var id=$(this).attr('id')

        //每次添加完样式要把添加的li的id记录到cookie

        var addedLI=$.cookie('addedLI')//获取已添加到cookie的值

        if(addedLI==null||addedLI==""||addedLI==undefined){

            //首次点击li,只将当前li的id加入cookie

            $.cookie('addedLI',id)

        }else{

            //已添加过id

            addedLI+=','+id//将已加入的id和当前的id连接成字符串,逗号分隔

            //更新cookie

            $.cookie('addedLI',addedLI)

        }

    })

    

    //页面加载完,获取存入cookie的id,分别给li加上class

    var addedLI=$.cookie('addedLI')//获取已添加到cookie的值

        if(addedLI!=null||addedLI!=""||addedLI!=undefined){

            //将加入的值以逗号分割成数据,然后循环遍历

            var strArray=addedLI.split(',')

            for(var i=0i<strArray.lengthi++){

                $("#"+strArray[i]).addClass('act')//给点击过的li添加上样式

            }

        }

})

页面刷新后数据就会被重置,因为页面已是一个全新的页面了,对于js来说,也是一个全新的运行环境。要让一个js带运行时的变量在页面刷新后也保持原样,是做不到的。

要实现你说的功能,最简单的办法就是使用cookie来保存你之前的变量值,在页面加载时读取cookie再做累加。

当然还可以将数据保存到后台,页面刷新时由后台将这个数据再打到页面上。