Question

我有一个关于jquery的问题，在点击div或p标签时显示和隐藏文本。

例如：

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

我不想逐个使用id进行jquery搜索，然后js代码太长而且不易维护。

我可以使用 $。每个这样的东西吗？

对此有何想法？

Answer 1

为.title使用公共课all title divs，在jquery中使用 next()

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

    });

<强> DEMO

Answer 2

使用常见的类名，而不是唯一的类名，您可以使用next()

之类的遍历方法

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

参考：next() API Docs

Jquery单击div标签以显示另一个div文本

2 个答案: