强制用户按顺序单击 <a> 个链接 <ol> <li>

Question

我有一个订单列表，其中包含大约 10 个列表项，这些列表项具有与之关联的锚标记 link。我试图强制用户在访问 link 后只能单击 parent li 的 child。所以从某种意义上说，我想强制用户按 ol.

生成的顺序单击 li links

这是我的 html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>titlePage</title>
  <link rel="stylesheet" type="text/css" href="titlePage.css"></head>
  <script src="../jsLibraries/jquery-3.1.0.js"></script>
  <script src="titlePage.js"></script>
</head>

<body>

<img id="backgroundIMG" src="images/Chapter-v2.png">

<ol id="chapterNumbers">
   <li><a href="../chapters/chapter0.html">Chapter 0 - Animate Content</a></li>
  <li><a href="../chapters/chapter1.html">Chapter 1 - Animate Content 2</a></li>
  <li><a href="../chapters/chapter2.html">Chapter 2 - Video Content</a></li>
  <li><a href="../chapters/chapter3.html">Chapter 3 - Video Content 2</a></li>
  <li><a href="../chapters/chapter4.html">Chapter 4 - Audio Content</a></li>
  <li><a href="../chapters/chapter5.html">Chapter 5 - Blah</a></li>
  <li><a href="../chapters/chapter6.html">Chapter 6 - Blah</a></li>
  <li><a href="../chapters/chapter7.html">Chapter 7 - Blah</a></li>
  <li><a href="../chapters/chapter8.html">Chapter 8 - Blah</a></li>
  <li><a href="../chapters/exam.html">Exam</a></li>
</ol>

<header id="courseTitle"> 001234OOELNA - Example Course Using Adobe Animate </header>


</body>
</html>

这是我开始使用的 jQuery JS：

$(document).ready(function(){

  $("li").first().nextAll().click(function( event ) {
      event.preventDefault();
  });

});

这是与正在访问的锚标记关联的 CSS：

a:visited {
color:white;
}

这里是 link 输出原样：

http://skywest.theyard.space/index/titlePage.html

任何人都可以帮我弄清楚我哪里出错了以及如何做到这一点，所以一旦单击第一个 link，first-child 的 link 就会被激活（返回 true？）等等，因此用户必须按顺序单击 links？

谢谢！埃里克

Answer 1

您的 JS 使除第一个以外的所有 link 都不可点击，无论它们是否被访问过。

很遗憾，您无法根据 js（参见 this link）确定是否访问了 link。

Answer 2

如果用户点击 link，将导航到 link 页面之外，所以任何技巧使用 add/remove class 将不起作用。

因此，即使在 return 使用 link 进行分页之后，此代码也应该可以工作。并在 closing/opening 浏览器之后重置订单。

$(document).ready( function() {
  if (!sessionStorage.active) {
    sessionStorage.active = "1";
  }

  (function set() {
    $("li a").each(function(idx, elm) {
      if (sessionStorage.active != idx+1) {
        $(elm)
          .parent().fadeTo(1, 0.7)
          .off("click").on("click", function(evt) {
            evt.preventDefault();
          });
      } else {
        $(elm)
          .parent().fadeTo(500, 1)
          .off("click").on("click", function() {
            sessionStorage.active = parseInt(sessionStorage.active, 10) + 1;
            set();
          });
      }
    });
  }());
});

版本 2：

$(document).ready( function() {
  if (!localStorage.active) {
    localStorage.active = "1";
  }

  (function set() {
    $("li a").each(function(idx, elm) {
      if (localStorage.active < idx+1) {
        $(elm)
          .parent().fadeTo(1, 0.7)
          .off("click").on("click", function(evt) {
            evt.preventDefault();
          });
      } else if (localStorage.active == idx+1){
        $(elm)
          .parent().fadeTo(1000, 1)
          .off("click").on("click", function() {
            localStorage.active = parseInt(localStorage.active, 10) + 1;
            set();
          });
      } else if (localStorage.active > idx+1) {
        $(elm)
          .parent().fadeTo(1000, 1)
          .off("click").on("click", function() {
            return true;
          });
      } 
    });
  }());
});

或版本 2 hyper "smplfd"，部分灵感来自 jefré-n 代码

$(function(){var a=localStorage.a||0,l=$('a')
l.click(function(){if(l.index(this)>a)return false
if(l.index(this)==a)localStorage.a=++a})})

Answer 3

看看这个。（我很好地评论了我的代码，因此不需要解释。但是，如果您需要澄清，请告诉我...:D)

var $links = $("li a");

//simplify localStorage error checking
var supportsLS = true;
try {
    //this will throw an exception if we can't use localStorage
    //ie. the user, like me, disables cookies ... :)
    localStorage.supportsLocalStorage = true;
    }
catch (exc) {
    supportsLS = false;
    }

//initialize the first link they can use
if (supportsLS && localStorage.getItem("nextAvail") === null) {
    localStorage.nextAvail = 0;
    }

function onLinkClick (evt) {
    /*
    This handles a given click on a link.
    */

    //no point in running rest of code--they don't have localStorage support
    //OR we aren't allowed to use it
    if (supportsLS === false) {
        return;
        }

    //cache some info -- improve readability
    var thisInd = $links.index(this);
    var nextAvail = parseInt(localStorage.nextAvail);

    //they can't view this link -- prevent it from working
    if (thisInd > nextAvail) {
        evt.preventDefault();
        }

    //if they clicked the last link they're allowed to click,
    //update localStorage.nextAvail so they can click the next link.
    else if (thisInd === nextAvail) {
        localStorage.nextAvail = thisInd + 1;
        }
    }

//setup onclick handlers
$links.click(onLinkClick);

错误总结：

我最初处理“更新”localStorage.nextAvail的方式~~有缺陷~~普通错误的。您可以检查代码以了解原因，但足以说明“updating”未更新任何内容，并且在按预期方式使用该程序时，用户可能会意外撤消他们的进度。

强制用户按顺序单击 <a> 个链接 <ol> <li>

Force Users to Click <a> Links In Sequential <ol> <li> Order

html

javascript

css

anchor

jquery