Question

I have a order list with about 10 list items that have anchor tag links associated with them. I am trying to force the user to only be able to click the child of the parent li once the link is visited. So in a sense I want to force the user to click the li links in the sequential order that is generated by the ol.

Here is my 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>

Here is my jQuery JS that I was starting with:

$(document).ready(function(){

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

});

Here is the CSS associated with the anchor tag being visited:

a:visited {
color:white;
}

Here is a link to the out put as it is:

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

任何人都可以帮我弄清楚我出错的地方以及如何做到这一点，一旦第一个链接被点击，第一个孩子的链接被激活（返回true？）等等，所以用户必须点击按顺序链接？

谢谢！埃里克

Answer 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})})

Answer 2

检查一下。（我很好地评论我的代码，所以不需要解释。但是，如果你需要澄清，请告诉我......：D）

try:
    tweet = json.loads(line)
except Exception as err:
    print err # or use log to see what happen
else:
    tweets_data.append(tweet)

错误摘要：

我最初处理“更新”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);的方式是~~有缺陷的~~ 普通错误。您可以检查代码以查看原因，但只需说“更新”没有更新，并且在以预期方式使用程序时，用户可能会意外撤消其进度。

Answer 3

你的JS会创建所有链接，但第一个不可点击，无论他们是否被访问过。

很遗憾，您无法根据js确定是否访问了某个链接（请参阅this link）。

强制用户点击<a> Links In Sequential </a> <ol> <a> </a> <li> <a> Order

3 个答案: