Question

我的代码在加载文件时有延迟。我必须点击<a href="#string" id="hash"></a> 两次使它显示.txt文件。

代码：

<script type='text/javascript'>
  $(document).ready(function(){
    $("a#hash").click(function(){
      var loc = $(window)[0].location;
      var getUrlString = $(loc).prop('hash').substr(1);
      $("p").load(getUrlString + '.txt');
    });
  });
</script>

<body>
  <p>This is a placeholder for your content</p>
  <a id="hash" href="#login">Login</button><br />
  <a id="hash" href="#register">Register</button><br />
  <a id="hash" href="#recovery">Recovery</button> 
</body>

例如，如果我第一次加载页面时点击登录 - 它不会显示任何内容。如果我点击登录后单击注册 - 它将显示登录。如果我点击注册后单击恢复 - 它将显示注册，但如果我再次单击恢复它将最终显示恢复。

抱歉我的英语不好，或者说很难解释我的问题。我还在学习jQuery，如果我自己尝试/失败，我会发现学习更容易，然后找出问题所在。通过阅读教程，它不一样：）

感谢。

Answer 1

首先，ID不应该在您的页面中重复。如果需要按标识符对元素进行分组，请使用类。

其次，您现在拥有的方法的问题是它会在更改窗口之前读取窗口的URL，以反映被点击的a中的新网址。这就是您在出现之前看到点击内容的原因。如果您需要获取URL的哈希值，则从单击的链接的href属性中获取它更容易，更简单。

考虑到这一点，试试这个：

<script type='text/javascript'>
    $(document).ready(function(){
        $("a.hash").click(function() {
            var textfileName = $(this).attr("href").replace("#", "");
            $("p").load(textfileName + '.txt');
        });
    });
</script>

<body>
    <p>This is a placeholder for your content</p>
    <a class="hash" href="#login">Login</button><br />
    <a class="hash" href="#register">Register</button><br />
    <a class="hash" href="#recovery">Recovery</button> 
</body>

Example fiddle

Answer 2

HTML元素必须具有唯一ID。您应该使用类和类选择器而不是ID。您也没有关闭锚标记（您已经关闭了不存在的button）。最后，您需要阻止单击处理程序中的默认操作，以防止实际获取链接。如果没有其他处理程序需要触发，则可以简单地返回false。否则，您将需要使用传递给回调函数e的事件对象，并使用e.preventDefault();。

<script type='text/javascript'>
  $(document).ready(function(){
    $("a.hash").click(function(e){
      var loc = $(window)[0].location;
      var getUrlString = $(loc).prop('hash').substr(1);
      $("p").load(getUrlString + '.txt');
      // you probably want an .htm file, though it will likely work
      // with HTML in a .txt file; browsers are forgiving
      return false;
    });
  });
</script>

<body>
  <p>This is a placeholder for your content</p>
  <a class="hash" href="#login">Login</a><br />
  <a class="hash" href="#register">Register</a><br />
  <a class="hash" href="#recovery">Recovery</a> 
</body>

我也不知道您为什么要尝试将 text 文件加载到段落中。通常，您需要加载 HTML 文件或执行某些脚本的结果。

我的jQuery加载脚本的延迟

2 个答案: