jQuery 显示/隐藏多个 div

Question

请帮助我在 jQuery 中显示/隐藏多个 div。我有一个 PHP 代码，可以生成多个选项卡和多个框，其 id 几乎相同。这是生成的 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();
    });
});

单击其中一个选项卡国家项目时，请帮助我隐藏显示的 div。 无论如何，感谢您的关注。

Answer 1

您的 2 行不起作用的原因是您的 [id=<>] 选择器之外有 itemid。
您还可以执行以下操作： $('selector:visible').hide(); 仅隐藏可见内容，而不是将显示设置为阻止然后切换。

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

Answer 2

我认为你想要 [] 内的 itemid，例如
$("[id^='country-glass-' + itemid + '-']").css...