js 点击方法怎么动态更换点击对象

Question

想法：

一组a标签，只有按顺序点击才能点击，不按顺序无法点击其他。
按从上到下的顺序点击，如果没有按顺序点击A标签点击不了，点击的就是LI标签，由li标签触发事件。前一个对象点击后下一个A标签的disabled就会解除，同时这个A所属的LI的点击也会解除
例如：一，二，三，如果不点击第一个点第二个会弹出相应的提示，或者警告。
N为页面一载入就释放了disabled和li的点击事件，点击了N。N+1的disabled CLASS会被解除，所属的LI的点击事件也会解除。

代码如下：

在线调试：https://codepen.io/TtSir/pen/...

  <div id="div1"></div>
  <ul>
      <li class="liProhibited"><a href="#" style="display: block" class="Prohibited">测试</a></li>
      <li class="liProhibited"><a href="#" style="display: block" class="Prohibited">测试</a></li>
      <li class="liProhibited"><a href="#" style="display: block" class="Prohibited">测试</a></li>
  </ul>
<button onclick="aRemoveDisabled()">启动aRemoveDisabled</button>

</script>
function addLoadListener(fn) {
    if (typeof window.addEventListener != 'undefined')
    {
        window.addEventListener('load',fn,false);
    }
    else if (typeof document.addEventListener != 'undefined')
    {
        document.addEventListener('load',fn,false);
    }
    else if (typeof window.attachEvent != 'undefined')
    {
        window.attachEvent('onload',fn);
    }
    else
    {
        var oldfn = window.onload;
        if (typeof window.onload != 'function')
        {
            window.onload = fn;
        }
        else
        {
            window.onload = function() {
                lodfn();
                fn();
            };
        }
    }
}
addLoadListener(nav);
function nav(){
    var initialPage=document.getElementById('initialPage'),
        oA = document.getElementsByTagName('li');
    for (var i = 0; i < oA.length; i++) {
        oA[i].onclick = function () {
            for (var i = 0; i < oA.length; i++) {
                oA[i].style.background = "";
            }
            this.style.background = '#676464';
            if(document.getElementById('initialPage')){biological.remove([initialPage]);}
        }
    }
}
function hasClass(ele, cls) {
    return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        ele.className = ele.className.replace(reg, " ");
    }
}
addLoadListener(aAddDisabled);
function aAddDisabled() {
    var disabledGroup=document.getElementsByClassName("Prohibited");
    for(var i=0;i<disabledGroup.length;i++){addClass(disabledGroup[i],'disabled');disabledGroup[i].addEventListener('click',aClick);}
}
function aClick() {
    console.log('点击了A标签');
}
function aRemoveDisabled() {
    removeLiRemind();
var disabledGroup=document.getElementsByClassName("Prohibited");
    var liProhibitedGroup=document.getElementsByClassName("liProhibited");
    for(var l=0;l<liProhibitedGroup.length;l++){liProhibitedGroup[l].addEventListener('click',li1)}
    var order=0;
    //self.setInterval(function () {console.log(order)},3000);
    if(order ===0 ){removeClass(disabledGroup[order],'disabled');liProhibitedGroup[order].removeEventListener('click',li1);}
     //一开始摘入方法时，释放第一个a标签进行点击。
     //order 为变量。
    disabledGroup[order].onclick=function () {
        if (order < disabledGroup.length) {order++;}
        // for (var i = 0; i < liProhibitedGroup.length; i++) {liProhibitedGroup[i].removeEventListener('click',li1);}
        removeClass(disabledGroup[order], 'disabled'); //移除下一个标签的disabled
        liProhibitedGroup[order].removeEventListener('click', li1); //移除配套方法
        console.log(order); //监测
};
}
addLoadListener(liRemind);
function liRemind() {
    var liGroup=document.getElementsByClassName('liProhibited');
    for(var i=0;i<liGroup.length;i++){
        liGroup[i].addEventListener('click',li)}
}
function li() {
    alert('点击了带有liProhibited属性的li')
}
function removeLiRemind() {
    var liGroup=document.getElementsByClassName('liProhibited');
    for(var i=0;i<liGroup.length;i++){
        liGroup[i].removeEventListener('click',li)}
}
function li1() {
    alert('liProhibited class解除 新增li2事件');
}
</script>

流程：
①：第一次点击：正常

②：第二次点击：无法执行disbledGroup[order]内的方法

问题：
当disbledGroup[order]运行完第一次时，即order等于0的时候运行正常，运行完后，order的累加方法使order=1，但是无法返回order=1重新赋予第二个标签继续点击事件；
但是，第一个a标签的点击方法没有消失。。。还可以继续点击第一个a标签，会继续执行disbledGroup[order]点击事件。

Answer 1

我用jQuery写了一个简单的例子，你看一下我这思路是否正确：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul li{
            line-height: 2em;
            background-color: orange;
            margin: 0.5em;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li data-index="1">测试1</li>
        <li data-index="2">测试2</li>
        <li data-index="3">测试3</li>
    </ul>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script>
        $(function() {
            var _index = 1;
            $("#ul").on("click", function(ev){
                var index = $(ev.target).data("index");
                var len = ev.currentTarget.children.length;
                if(_index === index){
                    _index++;
                    console.log("你点对了！")
                } else {
                    console.log("请按顺序点击！");
                    return false;
                }
                if(index === len) {
                    _index = 1;
                    console.log("本轮点击结束，可以重头点了！");
                } 

                return;
            });
        });
    </script>
</body>
</html>

Answer 2

添加一个开关，当点击了第一步，把第二步的开关打开，不打开，不能点击，以此类推