• onhashchange实现下一页与上一页功能,并且实现当前页面刷新时停留在当前页面


    原理是通过监听url锚的更变来渲染json数据里对应的id的内容

    使用实例如下

    创建json

    {"slist":{
        "group_111":{
            "name":"单选题",
            "descript":"本题型共2题,每小题10分,共20分",
            "testIds":[1601,1603]
            },
        "group_555":{
            "name":"多选题",
            "descript":"本题型共1题,每小题20分,共20分",
            "testIds":[1701]
            },
        "group_666":{
            "name":"填空题",
            "descript":"本题型共1题,每小题30分,共30分",
            "testIds":[1503]
        }
    }

    }

     // 使用 location.hash 属性来修改锚部分
     function changePart(id) {
        location.hash = id;
     }
     // 锚点改变后要执行的函数
     function myFunction(){
        var hasNum = getId();
        var _data = data.msg;
        var _item = _data[hasNum];
        render(_item);
     }
     //地址栏#id
     function getId(){
        var id = window.location.hash;
        if(id){
            return id.replace('#','');
        }else{
            return 0;
        }
     }
     // 渲染页面
    function render(d){

      var _html = ’’;
        $.each(d.slist,function(k,v){
                _htmlList += '<li>';
                _htmlList += '<h3>'+ v.name +'</h3>';
                _htmlList += '<h3 class="sub-introduce">'+ v.descript +'</h3>';
                for(var i =0; i < v.testIds.length; i++){
                    var testId = "xes_"+v.testIds[i];
                    var _num = _examId.indexOf(testId) +1;
                    _htmlList +='<button data-id="'+v.testIds[i]+'" class="examlist-btn">' + _num +'</button>'
                }
                _htmlList += '</li>'
            })
        $("body").html(html);
    }

    $(function(){
         $('body').on('click','.next-page',function(){
            var hasNum = getId();
            var _d = data.msg,
            _i = Number(hasNum)+1;
            if(_i < _d.length){

                changePart(_i);           
            }else{
                return false;
            }
        });
        $('body').on('click','.previous-page',function(){
            var hasNum = getId();
            var _d = data.msg,
            _i = Number(hasNum)-1;
            if(_i >=0 && _i < _d.length){
                changePart(_i);            
            }else{
                return false;
            }
        });

        var hasNum = getId();
        var _data = data.msg[hasNum];
        render(_data);
        // 调用hashchange
        if(window.addEventListener){
            window.addEventListener("hashchange", myFunction,false);
        }else if(window.attachEvent){
            window.attachEvent("hashchange", myFunction);
        }
     })

  • 相关阅读:
    jsfl 常用自定义方法
    jsfl 常用方法
    Java 跨平台原理
    JDK、JRE 和 JVM 的区别
    win10 中安装 JDK8 以及环境配置
    JDK 14 都已经发布了,Java 8 依然是我的最爱
    DOS 命令大全用法详解
    《Java程序设计基础》 第4章手记
    堆和栈的区别
    CC#JavaPython 基本数据类型比较
  • 原文地址:https://www.cnblogs.com/web-leader/p/5521186.html
Copyright © 2020-2023  润新知