如何顯示帶有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（具有相同的類），而其他的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元素之間的關系來實現所需a 。 嘗試這個：

<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();
})

工作實例

如果需要，您可以否定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();
})

小提琴的例子

請注意，雖然第二個示例較短，但可以說它的健壯性較差。 這將取決於結構的完善程度和更改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();
});

這是小提琴