Question

我正在构建一个AJAX可导航网站（代码取自CSS-Tricks），该网站使用标记中的常规链接，但是通过.js将其替换为哈希链接。

我不希望用户能够点击只会重新加载相同内容的链接。因为我正在使用哈希，对于除主页之外的任何页面（首次加载时），此问题解决了自身（如果用户单击当前URL哈希的哈希链接，则没有任何反应）。

我有一个解决方案，直到我将其定义为一个函数（因为我需要重用它）。它使用$（this）来获取已被点击的链接，如果它是当前页面则返回false。但是，现在返回窗口（作为数组对象）而不是单击的链接。

如何选择点击的链接？

// Use hashes instead of reloads to navigate the site.
function initiateHashNav(linkContainers) {
  var $this = $(this);
  $(linkContainers).delegate('a', 'click', function() {
    // Restrict clicking on link for current page.
    if ($this.attr('href') == window.location.href) {
      return false;
    } else {
      // The hash shouldn't contain window.location (clean URLs are happy URLs!).
      window.location.hash = $this.attr('href').substr(window.location.origin.length);
      return false;
    }
  });
}

Answer 1

将$this的声明移到正确的范围内，如下所示：

function initiateHashNav(linkContainers) {
  $(linkContainers).delegate('a', 'click', function() {
     var $this = $(this);
    // Restrict clicking on link for current page.
    if ($this.attr('href') == window.location.href) {
      return false;
    } else {
      // The hash shouldn't contain window.location (clean URLs are happy URLs!).
      window.location.hash = $this.attr('href').substr(window.location.origin.length);
      return false;
    }
  });
}

javascript中的每个函数都是一个范围。每个范围都有一个上下文（this），如果没有设置，则窗口对象成为上下文。

jQuery.fn.delegate将匹配的元素设置为eventhandler中的上下文，因此this是委托事件处理程序内的HtmlAncherElement。但是在函数initiateHashNav之外没有设置上下文，因此它只是窗口对象

如何从定义的函数中选择单击的链接？

1 个答案: