javascript - 如何使用包含在另一个元素中的 id 引用 div？

Question

我有一个按字母顺序排列的索引，单击它会取消隐藏包含它的内容的 div。

这是 HTML，所以我可以正确解释:

<ul class="index">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<div id="index-A" class="hide">A contents</div>
<div id="index-B" class="hide">B contents</div>
<div id="index-C" class="hide">C contents</div>

当点击一个字母时，我想取消隐藏它的内容 div 并隐藏所有其他可见的内容。

我该怎么做？

这是我一直在尝试的，但卡在了这一点上:

$('.index li').click(function(e) {
    // somehow reference the content div using: "index-" + $(this).text()
});

Answer 1

听起来你正在寻找这个:

$('.index li').click(function(e) {
   var div =  $('#index-'+  $(this).text()).show();
   div.siblings('div').hide();
});

您可以在此处查看工作示例:http://jsfiddle.net/ktsfs/1/