javascript - 多个 div 隐藏显示 jquery

Question

也许这是不可能的，但是，我有 50 个这样的独特 div:

<div id="nyc_data">
<a href="#nyc_pics" class="hidden">nyc</a>
</div>

<div id="la_data">
<a href="#la_pics" class="hidden">la</a>
</div>

<div id="san_data">
<a href="#san_pics" class="hidden">san</a>
</div>

等....

下面是我的 jquery:

jQuery(document).ready(function()
{
  var url=document.URL.split('#')[1];
  url=url.toLowerCase();
  if (url == "nyc_pics")
  {
    jQuery("#nyc_data").show();
    jQuery("#la_data, #san_data").hide();
  }

  if (url == "la_pics")
  {
    jQuery("#la_data").show();
    jQuery("#nyc_data, #san_data").hide();
  }

  if()
  {
  }
  etc....
 }

当这是 2 时，可以把它写出来，但我不可能为每个城市写 50 次左右的长 jquery。有没有一种有效的方法来获得一个简单的较小的 jquery 代码？

Answer 1

首先选择所有 div，jQuery 选择器 ID 以 '_data' 结尾，如 [id$='_data'] 并将它们全部隐藏。这也会隐藏您想要的 div。

现在从 url 获取所需的 div id，使用 jQuery 找到它并显示。

如果您的 uri 是 mySite.com/myPage#nyc_pics 那么 var urlHash = document.URL.split('#')[1] 将得到“nyc_pics” .在 toLowercase().replace("pics", "data") 之后，这将是“nyc_data”。现在，jQuery("#"+ divToSHow) 将是 $("#nyc_data")，它将匹配您的 div。然后你可以用 .show() 显示单个 div

jQuery(document).ready(function()
{
    var urlHash = document.URL.split('#')[1];
    var divToSHow = urlHash .toLowerCase().replace("pics", "data");
    jQuery("div[id$='_data']").hide();
    jQuery("#" + divToSHow).show();
});