多个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首先，作为[id$='_data'] jQuery选择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")，这将匹配您的分区。然后你就可以显示出与.show），其单格（

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 2

你可以使用这个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 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>