Javascript 多个div隐藏显示jquery

也许这是不可能的，但是，我有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>

---

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

您可以使用这个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();
}

---

您可以使用此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();
}

---

首先选择所有div，jQuery选择器id以“\u data”结尾，作为[id$=”\u data]，并将它们全部隐藏。这也将隐藏所需的div

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

如果您的uri是mySite.com/myPagenyc_pics，那么var urlHash=document.URL.split[1]将获得nyc_pics。在toLowercase.replacepics之后，这将是纽约大学的数据。现在，jQuery+divToSHow将是$nyc_数据，它将匹配您的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();
});

---

首先选择所有div，jQuery选择器id以“\u data”结尾，作为[id$=”\u data]，并将它们全部隐藏。这也将隐藏所需的div

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

如果您的uri是mySite.com/myPagenyc_pics，那么var urlHash=document.URL.split[1]将获得nyc_pics。在toLowercase.replacepics之后，这将是纽约大学的数据。现在，jQuery+divToSHow将是$nyc_数据，它将匹配您的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();
});

---

如果只使用jQuery切换父元素上的类并让CSS来完成工作，那么会更容易/更干净/更快。大概是这样的：

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

window.onload=函数{ $'all-the-things-btn'。单击，函数{ $'my-parent-div'。切换类'show-things'； }; }; 我的父母div>div{ 显示：无； } my-parent-div.show-things>div{ 显示：块； } 东西 更多的东西 更多的东西

---

如果只使用jQuery切换父元素上的类并让CSS来完成工作，那么会更容易/更干净/更快。大概是这样的：

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

window.onload=函数{ $'all-the-things-btn'。单击，函数{ $'my-parent-div'。切换类'show-things'； }; }; 我的父母div>div{ 显示：无； } my-parent-div.show-things>div{ 显示：块； } 东西 更多的东西 更多的东西

---

jQuerydiv[id$=\U data]。show应该像它选择以{U data]结尾的id的ever div一样工作。@KevinHufnagl将其添加为答案。jQuerydiv[id$=\U data]。show应该像它选择以{U data]结尾的id的ever div一样工作。@KevinHufnagl将其添加为答案。我理解{U数据，但是，如何区分URL？它还隐藏所有div。当我点击la_图片时，我得到一片空白。@Menew啊，我的坏消息。缺少字符串。替换位。更新了脚本。我了解_数据，但是，如何区分URL？它还隐藏所有div。当我点击la_图片时，我得到一片空白。@Menew啊，我的坏消息。缺少字符串。替换位。更新了脚本。我尝试了此操作，当我单击url时，它会隐藏我的所有div。@Menew尝试此jQuery'div[id$=\u data]：notcurrentId'.hide；取而代之的是，检查currentId是否是要显示的div的正确Id，因为我还没有测试代码。我尝试了这个方法，当我单击url时，它会隐藏我的所有div。@Menew试试这个jQuery'div[Id$=\u data]：notcurrentId'。hide；取而代之的是，检查currentId是否是要显示的div的正确Id，因为我还没有测试代码。我使用了一个带有cities的奇特框，因此第一个答案非常有效。谢谢，虽然我知道它有用。在不需要的时候大量依赖javascript不是一个好主意。如果要隐藏/显示大量div，CSS方法将立即在所有div上运行，并且比使用jQuery通过蛮力迭代所有div要快得多。我使用了一个奇特的城市框，因此第一个答案非常有效。谢谢，虽然我知道它有用。在不需要的时候大量依赖javascript不是一个好主意。如果要隐藏/显示大量div，CSS方法将立即在所有div上工作，并且比jQuery通过蛮力迭代所有div要快得多。