jQuery基于匹配的id隐藏类

Question

这是我的HTML代码:

<div id="bibletree">
  <p id="gen">Genesis</p>
  <p class="gen">01</p>
  <p class="gen">02</p>
  <p class="gen">03</p>
  <p class="gen">04</p>
  <p id="exo">Exodus</p>
  <p class="exo">01</p>
  <p class="exo">02</p>
  <p class="exo">03</p>
  <p class="exo">04</p>
  <p id="lev">Leviticus</p>
  <p class="lev">01</p>
  <p class="lev">02</p>
  <p class="lev">03</p>
  <p class="lev">04</p>     
</div>

使用Javascript:

$("#bibletree p").click(function() {
  $(".gen").slideToggle(400)
});

如您所见,我正在匹配<p>bibletree中的任何和所有标签<div>.我想知道如何只切换<p>具有与被点击元素的id相同的类的那些.因此,不是切换.gen它将切换.[id of <p> that was clicked].我要求的是让人联想到正则表达式引用.有任何想法吗？

Answer 1

jsBin演示

$("#bibletree p[id]").click(function() {
  $("."+this.id).slideToggle(400);
});

编辑:
如果你想删除所有(不必要的？)类,你可以做:

$("#bibletree p[id]").click(function() {
  $(this).nextUntil('p[id]').slideToggle(400);
});

jsBin演示

<div id="bibletree">
  <p id="title">Genesis</p>
  <p>01</p>
  <p>02</p>
  <p>03</p>
  <p>04</p>
  <p id="title">Exodus</p>
  <p>01</p>
  <p>02</p>
  <p>03</p>
  <p>04</p>
  <p id="title">Leviticus</p>
  <p>01</p>
  <p>02</p>
  <p>03</p>
  <p>04</p>     
</div>

CSS:

#bibletree p{
  display:none;
}
#title{
 display:block;
}