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

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

Answer 2

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

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

jQuery显示/隐藏多个div

2 个答案: