jQuery显示/隐藏多个div

请帮助我在jQuery中显示/隐藏多个div。我有一个PHP代码，可以生成多个选项卡和多个框，其中id几乎相同。这里是产生HTML行：jQuery显示/隐藏多个div

<ul id="tab-country"> 
    <li><a id="africa" rel="1" href="#">africa</a></li> 
    <li><a id="europe" rel="1" href="#">europe</a></li> 
    <li><a id="asia" rel="1" href="#">asia</a></li> 
</ul> 

<div id="country-glass-1-africa" style="display:none;">Africa Glass 1</div> 
<div id="country-glass-1-europe" style="display:none;">Europe Glass 1</div> 
<div id="country-glass-1-asia" style="display:none;">Asia Glass 1</div> 

<div id="country-spoon-1-africa" style="display:none;">Africa Spoon 1</div> 
<div id="country-spoon-1-europe" style="display:none;">Europe Spoon 1</div> 
<div id="country-spoon-1-asia" style="display:none;">Asia Spoon 1</div> 

<ul id="tab-country"> 
    <li><a id="africa" rel="2" href="#">africa</a></li> 
    <li><a id="europe" rel="2" href="#">europe</a></li> 
    <li><a id="asia" rel="2" href="#">asia</a></li> 
</ul> 

<div id="country-glass-2-africa" style="display:none;">Africa Glass 2</div> 
<div id="country-glass-2-europe" style="display:none;">Europe Glass 2</div> 
<div id="country-glass-2-asia" style="display:none;">Asia Glass 2</div> 

<div id="country-spoon-2-africa" style="display:none;">Africa Spoon 2</div> 
<div id="country-spoon-2-europe" style="display:none;">Europe Spoon 2</div> 
<div id="country-spoon-2-asia" style="display:none;">Asia Spoon 2</div>

，并在页面的结束，这里是jQuery的行：

$(function(){ 
    $("[id$='-africa']").toggle(); 
    $("#tab-country li a").click(function(event){ 
     var country = $(this).attr('id'); 
     var itemid = $(this).attr('rel'); 
     /* the following 2 lines are not working - i want to hide them if they're shown */ 
     $("[id^='country-glass-']"+itemid+"-").css('display','block').toggle(); 
     $("[id^='country-spoon-']"+itemid+"-").css('display','block').toggle(); 
     /* the following works as it is supposed to be */ 
     $("#country-glass-"+itemid+"-"+country).toggle(); 
     $("#country-spoon-"+itemid+"-"+country).toggle(); 
     event.preventDefault(); 
    }); 
});

请帮我隐藏的div所示的制表符的一个时国家项目被点击。无论如何，感谢您的关注。

来源

2011-10-27 Andy

非常类似的问题：？展现更好的办法/隐藏多个div]（http://stackoverflow.com/questions/6861905/better-way-to-show-hide-multiple-divs） –

'身份证件必须是唯一的。 – Dennis

的2线不工作的原因是因为你已经为itemid您[id=<>]选择之外。您也可以这样做：$('selector:visible').hide();只隐藏可见内容，而不是将显示设置为阻止，然后切换。

$('[id^="country-glass-'+itemid+'-"], [id^="country-spoon-'+itemid+'-"]').filter(':visible').hide();

来源

2011-10-27 16:59:58

它的工作原理！多谢。我希望你能帮助更多像你一样的成员。干杯... – Andy

我想你想里面的[]中的itemid，像 $("[id^='country-glass-' + itemid + '-']").css...

来源

2011-10-27 16:55:39 Rodolfo

虽然这不完全是我想要的，但我真的很感谢你的关注。干杯，鲁道夫。 – Andy

jQuery显示/隐藏多个div

回答

相关问题