JQuery показать / скрыть несколько Div - PullRequest
Новая
       14

JQuery показать / скрыть несколько Div

0 голосов
/ 27 октября 2011

Пожалуйста, помогите мне показать / скрыть несколько div в jQuery. У меня есть код PHP, который производит несколько вкладок и несколько блоков, с идентификаторами, которые почти идентичны. Вот созданные строки 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();
    });
});

Пожалуйста, помогите мне скрыть показанные элементы, когда щелкает один из элементов страны вкладки. В любом случае, спасибо за внимание.

Ответы [ 2 ]

0 голосов
/ 27 октября 2011

Причина, по которой ваши две строки не работают, заключается в том, что у вас есть itemid вне вашего [id=<>] селектора.Вы также можете сделать что-то вроде этого: $('selector:visible').hide();, чтобы скрыть только видимый контент, вместо того, чтобы настроить отображение на блокирование и затем переключение. 

$('[id^="country-glass-'+itemid+'-"], [id^="country-spoon-'+itemid+'-"]').filter(':visible').hide();
0 голосов
/ 27 октября 2011

Я думаю, что вы хотите itemid внутри [], как $("[id^='country-glass-' + itemid + '-']").css...

...