Question

也许这是不可能的，但是，我喜欢这样的50个独特的div：

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....
 }

等...

下面是我的jquery：

JOIN

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

Answer 1

您可以使用此CSS选择器：

jQuery('div[id$="_data"]').show();

在你的例子中：

jQuery(document).ready(function()
{
    var url=document.URL.split('#')[1];
    url=url.toLowerCase();
    var currentId = '#' + url.split('_')[0] + "_data";
    jQuery('div[id$="_data"]').hide();
    jQuery(currentId).show();
}

Answer 2

首先选择所有div，jQuery选择器id以'_data'结尾为[id$='_data']并隐藏所有div。这也会隐藏你想要的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();
});

Answer 3

如果您只是使用jQuery在父元素上切换类并让CSS完成工作，那将会更容易/更清晰/更快。像这样：

window.onload = function() {
  $('#all-the-things-btn').on('click', function() {
    $('#my-parent-div').toggleClass('show-things');
  });
};

#my-parent-div > div {
  display: none;
}

#my-parent-div.show-things > div {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="all-the-things-btn">Toggle all the things!</a>

<div id="my-parent-div" class="show-things">
  <div id="1">stuff</div>
  <div id="2">more stuff</div>
  <div id="3">even more stuff</div>
</div>

多个div隐藏显示jquery

3 个答案: