基於匹配的IDS jQuery的隱藏類

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 <div>內的任何和所有<p>標籤。我想知道如何切換那些類型與被單擊元素的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

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

http://jsfiddle.net/D7aWQ/

Answer 5

這裏一些不錯的解決方案。但是所有這些人都會在沒有身份證的情況下點擊p時提出錯誤。

這人會解決這個問題：

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

Answer 6

我建議改變你的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); 
});