jquery點擊div標籤顯示另一個div文本

我有一個問題，關於jQuery的顯示和隱藏文本時點擊div或p標籤。jquery點擊div標籤顯示另一個div文本

例如：

<div class="title" style="background-color: Yellow; cursor: pointer"> 
     The League secretary and monitor ___ asked to make a speech at the meeting. 
     </div> 

     <div id="cont" style="display: none"> 
     答案B. 注： 先從時態上考慮。這是過去發生的事情應用過去時，先排除A.，C.。本題易誤選D，因爲The League secretary and monitor 好象是兩個人，但仔細辨別， monitor 前沒有the，在英語中，當一人兼數職時只在第一個職務前加定冠詞。後面的職務用and 相連。這樣本題主語爲一個人，所以應選B。 

     </div>

JS代碼：

 $(function() { 
     $(".title").click(function() { 
      $("#cont").toggle(200); 
     }); 

    });

現在的問題是，我有很多行，每行單擊div.title，下面div.cont秀。

<div class="title_1" style="background-color: Yellow; cursor: pointer"> 
      title 1 
     </div> 

     <div id="cont_1" style="display: none"> 
     details 1 
      </div> 

       <div class="title_2" style="background-color: Yellow; cursor: pointer"> 
      title 2 
     </div> 
      <div id="cont_2" style="display: none"> 
      details 2 
      </div> 

       <div class="title_3" style="background-color: Yellow; cursor: pointer"> 
      title 3 
     </div> 
      <div id="cont_3" style="display: none"> 
      details 3 
      </div> 
      ........ may to title_50.

我不想一個接一個地使用jQuery的id搜索，然後js代碼太長，不容易維護。

我可以使用$。每個類似的東西？

對此有何想法？

來源

2014-12-19 Jack.li

使用comman類.title爲all title divs，並使用next() jQuery中

$(function() { 
     $(".title").click(function() { 
      $(this).next().toggle(200); 
     }); 

    });

DEMO

來源

2014-12-19 06:19:41 Balachandran

爲了進一步的特殊性（如果dom改變）使用同級選擇器的兄弟姐妹。 – 2014-12-19 06:34:33

哇，它的工作，非常感謝您的幫助 – 2014-12-19 07:09:27

@ Jack.li歡迎:) – Balachandran 2014-12-19 07:12:16

使用常見的類名稱，而不是唯一的人，你可以使用一個遍歷方法類似next()

$(".title").click(function() { 
    $(this).next().toggle(200); 
});

參考：next() API Docs

來源

2014-12-19 06:20:29 charlietfl

這真的是我需要的，非常感謝 – 2014-12-19 07:10:26

jquery點擊div標籤顯示另一個div文本

回答

相關問題