javascript - 如何显示带有id的元素并隐藏其他元素

Question

我有一个包含一些元素和 ID 的列表:

<ul>
<li id="test1">Test1</li>
<li id="test2">Test2</li>
<li id="test3">Test3</li>
</ul>

<div class=test1">Test 1, okay!</div>
<div class=test2">Test 2, okay!</div>
<div class=test3">Test 4, okay!</div>

如果我点击一个 li，特定的 div(具有相同的类)应该出现而其他的应该隐藏。我尝试了一些 javascript，但它似乎不起作用。

$('.photo-select li').click(function() {
            var productid = $(this).attr('id');
            $('.productinfo:not(.'+productid+')').hide();
            $('.productinfo:is(.'+productid+')').show();
});

Answer 1

首先，您有重复的无效 id 属性。 id 对于 document 中的每个元素必须是唯一的。其次，您可以通过使用公共(public)类和 data 属性来指定 a 和 div 元素之间的关系来实现您的要求。试试这个:

<ul>
    <li class="foo" data-rel="test1">Test1</li>
    <li class="foo" data-rel="test2">Test2</li>
    <li class="foo" data-rel="test3">Test3</li>
</ul>

<div class="content" id="test1">Test 1, okay!</div>
<div class="content" id="test2">Test 2, okay!</div>
<div class="content" id="test3">Test 4, okay!</div>

.content {
    display: none;
}

$('.foo').click(function() {
    $('#' + $(this).data('rel')).show().siblings('div').hide();
})

Working example

如果愿意，您可以取消对 data 属性和 id 的需求，而是通过它们在各自容器中的索引来关联元素:

<ul>
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
</ul>

<div id="content-container">
    <div>Test 1, okay!</div>
    <div>Test 2, okay!</div>
    <div>Test 4, okay!</div>
</div>

#content-container > div {
    display: none;
}

$('li').click(function() {
    $('#content-container').find('div').eq($(this).index()).show().siblings().hide();
})

Example fiddle

请注意，虽然第二个示例较短，但可以说它不够健壮。这将取决于您的 HTML 的结构化程度和更改可能性。不过，两者都是完全可以接受的解决方案。