如何顯示元素編號並隱藏其他

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> 

如果我點擊的李，具體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