1

这是我的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]. 我要的是让人想起正则表达式引用。有任何想法吗？

4

6 回答 6

5

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;
}
于 2012-08-29T14:06:12.273 回答
1 
$("#bibletree p").click(function() {
  $("." + $(this).attr("class")).slideToggle(400);
});

考虑到您已经拥有的代码，最简单的方法是这样做。这假设那些 P 元素将只有一个类/，而一个根本没有类的元素呢？

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

于 2012-08-29T14:06:23.343 回答
1

问答

$("#bibletree p").click(function() {
  $("#bibletree > p." + $(this).attr("id")).slideToggle(400)
});
于 2012-08-29T14:07:30.960 回答
1

我建议更改您的 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);
});
于 2012-08-29T14:14:47.307 回答
0 
$("#bibletree p").click(function() {  
$(this).slideToggle(400)
});

http://jsfiddle.net/D7aWQ/

于 2012-08-29T14:08:18.650 回答
0

这里有一些不错的解决方案。但是，当单击没有 id 的 ap 时，它们都会引发错误。

这将解决这个问题：

$("#bibletree p[id]").click(function() {
  this.id && $("#bibletree p."+this.id).slideToggle(400);
});
于 2012-08-29T14:11:54.313 回答