多個div隱藏顯示的jQuery

也許這是不可能的，但是，我有一個50周獨特的div像這樣：多個div隱藏顯示的jQuery

<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代碼？

來源

2015-09-11 NULL

的jQuery（DIV [ID $ = 「_數據」]）顯示（）應該工作爲它選擇曾經在「_data」結束ID覈實。 –

@KevinHufnagl將其作爲答案。 –

選擇所有的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(); 
});

來源

2015-09-11 19:26:41

我明白_data，但是，你如何區分網址？它也隱藏了所有的div。當我點擊la_pics時，我變得空白。 – NULL

@Menew啊，我的壞。錯過了string.replace位。更新了腳本。 –

優秀作品！ – NULL

你可以使用這個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(); 
}

來源

2015-09-11 19:26:33

我試過這個，當我點擊一個網址時，它隱藏了我所有的divs。 – NULL

@Menew試試這個jQuery（'div [id $ =「_ data」]：not（currentId）'）。hide（）;相反，並檢查currentId是否是您要顯示的div的正確ID，因爲我沒有測試過代碼。 –

-1

這將是更容易/清潔/更快，如果你只是使用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>

來源

2015-09-11 19:57:05 EricL

我在城市中使用了一個漂亮的方塊，所以第一個答案完美無缺。雖然 – NULL

我知道它的作品。當你不需要的時候嚴重依賴javascript是不是一個好主意。如果你要隱藏/顯示大量的div，CSS方法可以立即工作，並且比jQuery通過強力方式遍歷它們更快。 – EricL

多個div隱藏顯示的jQuery

回答

相關問題