如何显示带有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（具有相同的 class）应该出现，而其他的应该隐藏。我已经尝试了一些 javascript 但似乎不起作用。

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

Answer 1

浏览器只能看到 ID 的第一次出现，因为它们将它们存储在快速查找中，每个键值只有一个元素。

使用类和 data- 属性来避免这种情况：

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

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

代码变为：

$('.photo-select .clickme').click(function() {
        var productid = $(this).data('target');
        $('.productinfo').not(productid).hide();
        $(productid).show();
});

3 行代码可以缩短，但这只是为了说明。

最后一个问题是隐藏初始状态。您可以添加 style="display:none" 或使用 CSS.

默认设置样式

Answer 2

首先，您有重复的 id 无效属性。 id 对于 document 中的每个元素必须是唯一的。其次，您可以通过使用公共类和 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 的结构和可能改变的程度。不过，两者都是完全可以接受的解决方案。

Answer 3

您的代码就差不多了，只是一些小的调整：

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

这是fiddle

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

How to show element with id and hide other

html

javascript

css

jquery

hide