Question

我正在建立一个带有团队页面的网站，每个团队成员的生物都会通过点击按钮在弹出窗口中打开。我点击按钮打开弹出窗口然后点击'x'关闭它。

我的问题是，只有当输入哈希到第一个成员的URL时，才会出现她的弹出窗口。其余的，这不起作用。这需要发生，因为URL链接到其他页面。

包含各种哈希href的所有按钮都被赋予了类名“open-team”。以下jQuery代码适用于第一个团队成员，但不适用于其他成员。我在这里缺少什么？

我的代码如下：

(function() {
  //open popup
  $(".open-team").on('click', function(e) {
    $(this).closest('.team-info').next(".team-overlay").fadeToggle(); //When clicked, toggle visibility.
  });

  //close popup
  $(".team-close").on('click', function() {
    $(this).closest(".team-overlay").fadeToggle(); //When clicked, toggle visibility.
    var location = window.location.href.split('#')[0];
    history.pushState('Meet The Team', 'Meet The Team', location);
  });

  //the problem code, where only the first pop up works, but not the rest
  if(window.location.hash == $(".open-team").attr('href')) {
    var href = window.location.hash;
    var open = $('a[href=' + href + ']');
    open.closest('.team-info').next(".team-overlay").show();
  }

})();

Answer 1

感谢ADyson提出的建议！我似乎找到了一种有效的方法。但是不确定这是否100％符合jQuery规则，但它似乎确实100％有效。

  $(".open-team").each(function() {
    if(window.location.hash == $(this).attr('href')) {
      var href = window.location.hash;
      var open = $('a[href=' + href + ']');
      open.closest('.team-info').next(".team-overlay").show();
    }
  });

Answer 2

您不需要if检查或循环$.each链接。你可以这样做：

$('a[href=' + window.location.hash + ']').
  closest('.team-info').next(".team-overlay").show();

为什么？

因为与常规JavaScript不同，jQuery总是返回jQuery object（类似于数组，这意味着如果没有与您提供的选择器匹配的元素，则对象不会null或undefined但是一个空集合）对象，所以如果没有与条件（href = location.hash）匹配的链接，则不会发生任何事情。

如果您尝试使用常规JavaScript（例如document.querySelector('a[href=' + window.location.hash + ']')）执行此操作，则需要检查它是否存在，您可以对其执行任何操作。

您可以在下面的演示中看到它。只需更改网址中的hash即可看到结果。

http://output.jsbin.com/diqagom#link-b

如果不清楚，请告诉我。

通过在URL中输入哈希来打开popup div

2 个答案: