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必须是唯一的。其次，通过使用公共类和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 2

浏览器只能看到第一次出现的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 3

您的代码几乎就在那里，只需进行一些小调整：

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

这是fiddle

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

3 个答案: