jQuery複数のdivを表示/非表示

Question

jQueryで複数のdivを表示/非表示にしてください。私は、複数のタブと複数のボックスを生成するPHPコードを持っています.Iidはほぼ同じです。ここで生産HTMLの行です：

<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(); 
    }); 
}); 

タブ区切りのとき1、示さdivを非表示にして私を助けてください国の項目がクリックされます。 とにかく、ありがとうございました。

Answer 1

のようなあなたの2行が働いていない理由は、あなたが[]内のアイテムIDをしたいと思います。 $('selector:visible').hide();のようにすることもできます。表示をブロックに設定して切り替えて表示するのではなく、表示可能なコンテンツのみを非表示にすることができます。

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

Answer 2

私はあなたの[id=<>]セレクタ外ITEMIDたので $("[id^='country-glass-' + itemid + '-']").css...