javascript - 在特定的 div 中加载第二个内容 onclick

Question

我正在尝试用一些事实框制作一个页面，所以我用两个

标签文本 block 制作了这些带有类的 div，第二个 block 上有“不显示”，应该首先当您点击 div 时显示。

这就是我的问题 我想制作一个 Jquery 函数，当我单击 div 时加载第二段 我只是不知道如何在不使用任何 id 或类的情况下告诉网站它具体是那个段落这将触发所有其他 div。

这是我的代码:

 <div id="content">
       <div class="teaser-box">
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
       </div>

       <div class="teaser-box">
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
       </div>

       <div class="teaser-box">
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
       </div>

       <div id="load-teas"><h4>Load more</h4></div>


  </div><!-- content END -->

---

谢谢!

Answer 1

您可以使用另一个 Jquery Selector喜欢:nth-child ，在你的函数中是这样的:

$(document).ready(function () {
   $('.teaser-box').click(function () {
      $('p:nth-child(2)',this).show();
   })
})

演示 http://jsfiddle.net/KC63V/4/