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 要素が 1 つのクラスのみを持つことを前提としています。

無視してください、私はあなたの質問を間違って読みました。IDがクリックされたものが必要です。表示された他の 2 つの回答が役立ちます。

于 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

I would recommend changing your HTML structure:

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

You could then toggle the numbered items like so:

$("#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 に答える