jQuery 여러 div 표시/숨기기

Question

jQuery에서 여러 div 표시/숨기기를 도와주세요. 거의 동일한 ID를 사용하여 여러 탭과 여러 상자를 생성하는 PHP 코드가 있습니다. 의 탭 -의 경우 하나

가

$(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 숨어 제발 도와주세요 :

<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를 줄입니다 : 여기에 생성 된 HTML 라인입니다 국가 항목을 클릭합니다. 어쨌든, 고맙습니다.

Answer 1

처럼, 당신은 [] 안에 상품 ID를 원하는 생각합니다. $('selector:visible').hide();과 같은 방법으로 표시를 설정하고 표시를 전환하지 않고 표시되는 내용 만 숨길 수도 있습니다.

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

Answer 2

나는 당신이 당신의 [id=<>] 선택 이외의 항목 ID 있기 때문에 당신이 개 라인이 작동하지 않는 이유는 $("[id^='country-glass-' + itemid + '-']").css...