强制用户按 <ol> <li> 顺序点击 <a> 链接答案

【问题标题】：Force Users to Click <a> Links In Sequential <ol> <li> Order强制用户按 <ol> <li> 顺序点击 <a> 链接
【发布时间】：2016-09-08 18:27:44
【问题描述】：

我有一个包含大约 10 个列表项的订单列表，这些列表项具有与之关联的锚标记链接。我试图强制用户在访问链接后只能单击父 li 的子级。所以从某种意义上说，我想强制用户按 ol 生成的顺序点击 li 链接。

这是我的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;
}

这里是输出的链接：

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

谁能帮我弄清楚我哪里出错了，以及如何做到这一点，一旦点击第一个链接，第一个孩子的链接就会被激活（返回真？）等等，所以用户必须点击按顺序链接？

谢谢！埃里克

【问题讨论】：

仅供参考，出于明显的安全原因，您不能在 javascript 中定位 :visited 伪选择器。现在，如果您只想让用户在每个页面加载时按顺序单击，这当然是可能的
在每个页面上只显示“可用”链接有什么问题（即第1页只显示第1页链接，第2页显示第1,2页链接）？
所以一旦他们点击了第一个链接，那么他们就可以点击第二个链接，以此类推？他们可以多次点击同一个链接吗？
“所以从某种意义上说，我想强制用户按 ol 生成的顺序单击 li 链接” 不完全确定预期的结果是什么？用户必须按顺序点击<a>？用户必须先点击<a>？那么，只能点击第二个<a>？
如果不允许用户点击页面，为什么还要在页面中进行导航？只需省略每个页面中的额外链接即可。

标签： javascript jquery css html anchor

【解决方案1】：

如果用户点击链接，则被导航出链接页面，所以任何技巧添加/删除类将不起作用。

因此，即使返回带有链接的页面，此代码也应该可以工作。关闭/打开浏览器后会重置订单。

$(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 超级“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})})

【讨论】：

有什么办法可以让已经访问过的仍然可以再次访问？对不起，我没有把原始评论说得足够清楚......
是的。只需使用 localStorage 而不是 sessionStorage。
所以你是说把 sessionStorage 改成 localStorage？我试过了，它似乎仍然不允许我访问一个链接两次。一旦它继续前进，我就无法点击我以前访问过的链接......知道为什么吗？你帮了我很大的忙，我非常感谢！
我可能不清楚 - 第二次我的意思是如果他们想查看他们已经访问过的链接内容......例如。用户转到titlePage。最初仅启用第 0 章链接。用户单击第 0 章并浏览页面，直到返回 titlePage。那时，自从第 0 章被访问过。现在启用第 0 章和第 1 章。用户单击第 1 章并继续浏览直到返回 titlePage。现在第 0 章、第 1 章和第 2 章已启用。依此类推...如果需要，用户可以单击他们访问过的任何以前的章节进行查看。
好的。我添加了第 2 版。我希望它是您想要的。

【解决方案2】：

看看这个。（我很好地评论了我的代码，因此不需要解释。但是，如果您需要澄清，请告诉我...：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 的方式是~~有缺陷的~~ plain 错误的。您可以检查代码以了解原因，但只要说“更新”没有更新任何内容就足够了，并且在以预期方式使用程序时，用户可能会意外撤消他们的进度。

【讨论】：

太棒了！谢谢！当我从这趟航班回家并回复你时，我将对此进行测试:)
抱歉 - 我意识到直到劳动节假期之后我才能访问服务器和我的文档。我会在星期二回复你这件事。希望没问题？谢谢！非常感谢您的帮助！
@EricBelisleGiddings：没问题。 :)
@EricBelisleGiddings：嗯。让我检查一下。 :(
@EricBelisleGiddings：恐怕不会。但是，您可以对我们的两个答案都投赞成票。 （不过，我认为你已经这样做了。） 事实上，我认为 Walder@ 可能值得被接受，因为他首先给了你一个 (semi) 有效的答案。 :)

【解决方案3】：

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

很遗憾，你无法判断一个链接是否被访问过，基于js（见this link）。

【讨论】：

“很遗憾，您无法确定链接是否被访问过” 应该可以使用javascript