鍍金池/ 問答/HTML5  HTML/ js 點(diǎn)擊方法怎么動(dòng)態(tài)更換點(diǎn)擊對(duì)象

js 點(diǎn)擊方法怎么動(dòng)態(tài)更換點(diǎn)擊對(duì)象

想法:

一組a標(biāo)簽,只有按順序點(diǎn)擊才能點(diǎn)擊,不按順序無法點(diǎn)擊其他。
按從上到下的順序點(diǎn)擊,如果沒有按順序點(diǎn)擊A標(biāo)簽點(diǎn)擊不了,點(diǎn)擊的就是LI標(biāo)簽,由li標(biāo)簽觸發(fā)事件。前一個(gè)對(duì)象點(diǎn)擊后下一個(gè)A標(biāo)簽的disabled就會(huì)解除,同時(shí)這個(gè)A所屬的LI的點(diǎn)擊也會(huì)解除
例如:一,二,三,如果不點(diǎn)擊第一個(gè)點(diǎn)第二個(gè)會(huì)彈出相應(yīng)的提示,或者警告。
N為頁面一載入就釋放了disabled和li的點(diǎn)擊事件,點(diǎn)擊了N。N+1的disabled CLASS會(huì)被解除,所屬的LI的點(diǎn)擊事件也會(huì)解除。

代碼如下:

在線調(diào)試:https://codepen.io/TtSir/pen/...


  <div id="div1"></div>
  <ul>
      <li class="liProhibited"><a href="#" style="display: block" class="Prohibited">測(cè)試</a></li>
      <li class="liProhibited"><a href="#" style="display: block" class="Prohibited">測(cè)試</a></li>
      <li class="liProhibited"><a href="#" style="display: block" class="Prohibited">測(cè)試</a></li>
  </ul>
<button onclick="aRemoveDisabled()">啟動(dòng)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('點(diǎn)擊了A標(biāo)簽');
}
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);}
     //一開始摘入方法時(shí),釋放第一個(gè)a標(biāo)簽進(jìn)行點(diǎn)擊。
     //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'); //移除下一個(gè)標(biāo)簽的disabled
        liProhibitedGroup[order].removeEventListener('click', li1); //移除配套方法
        console.log(order); //監(jiān)測(cè)
};
}
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('點(diǎn)擊了帶有l(wèi)iProhibited屬性的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>

流程:
①:第一次點(diǎn)擊:正常

clipboard.png

②:第二次點(diǎn)擊:無法執(zhí)行disbledGroup[order]內(nèi)的方法

clipboard.png

問題:
當(dāng)disbledGroup[order]運(yùn)行完第一次時(shí),即order等于0的時(shí)候運(yùn)行正常,運(yùn)行完后,order的累加方法使order=1,但是無法返回order=1重新賦予第二個(gè)標(biāo)簽繼續(xù)點(diǎn)擊事件;
但是,第一個(gè)a標(biāo)簽的點(diǎn)擊方法沒有消失。。。還可以繼續(xù)點(diǎn)擊第一個(gè)a標(biāo)簽,會(huì)繼續(xù)執(zhí)行disbledGroup[order]點(diǎn)擊事件。

回答
編輯回答
尕筱澄

我用jQuery寫了一個(gè)簡單的例子,你看一下我這思路是否正確:

<!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">測(cè)試1</li>
        <li data-index="2">測(cè)試2</li>
        <li data-index="3">測(cè)試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("你點(diǎn)對(duì)了!")
                } else {
                    console.log("請(qǐng)按順序點(diǎn)擊!");
                    return false;
                }
                if(index === len) {
                    _index = 1;
                    console.log("本輪點(diǎn)擊結(jié)束,可以重頭點(diǎn)了!");
                } 

                return;
            });
        });
    </script>
</body>
</html>
2018年4月6日 17:15
編輯回答
不討囍

添加一個(gè)開關(guān),當(dāng)點(diǎn)擊了第一步,把第二步的開關(guān)打開,不打開,不能點(diǎn)擊,以此類推

2017年7月9日 19:31