jquery - 通过在 URL 中输入哈希值来打开弹出 div

Question

我正在构建一个带有团队页面的网站，通过单击按钮可以在弹出的 div 中打开每个团队成员的个人简介。我已经了解了单击按钮打开弹出窗口并单击“x”将其关闭。

我的问题是，只有当将哈希输入第一个成员的 URL 时，她的弹出窗 Eloquent 会出现。对于其他人来说，这不起作用。这是需要发生的，因为 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

您两者都不需要，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 + ']'))执行此操作，您将需要检查是否在你对它做任何事之前它就存在了。

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

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

如果有任何不清楚的地方，请告诉我。