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

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

Answer 1

<强> jsBin demo

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

<小时/> 修改
如果你想删除你可以做的所有（不必要的？）类：

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

<强> jsBin demo

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

Answer 2

$("#bibletree p").click(function() {
  $("." + $(this).attr("class")).slideToggle(400);
});

根据您已有的代码，最简单的方法。这假设那些P元素只有一个类/那个没有类的那个？

无视，我读错了你的问题。你想要点击id的那个。刚出现的另外两个答案可以帮助你。

Answer 3

Q＆安培; d

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

Answer 4

我建议您更改HTML结构：

<ul id="bibletree">
  <li id="gen">
    <h2>Genesis</h2> // the tag here would semantically depend on the rest of your page.
    <ol>
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
    </ol>
  </li>
  ... 
</ul>

然后您可以像这样切换编号的项目：

$("#bibletree h2").click(function(){
    $(this).siblings("ol").slideToggle(400);
});

Answer 5

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

http://jsfiddle.net/D7aWQ/

Answer 6

这里有一些很好的解决方案。但是当点击没有id的p时，所有这些都会引发错误。

这个将解决这个问题：

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