Question

我有很多段落和链接，应该独立显示/隐藏每个段落。

<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

        </script>
        <script>
            $(document).ready(function() {
                $("#showtext").hide();
                $("#click").click(function() {
                    $("#showtext").next("p").toggle();
                });
            });
        </script>
    </head>

    <body> 
        <a href="#" id="click">Click for Show/hide</a>

        <p id="showtext">This text will show/hide</p> <a href="#" id="click">Click for Show/hide</a>

        <p id="showtext">This text will show/hide</p> <a href="#" id="click">Click for Show/hide</a>

        <p id="showtext">This text will show/hide</p> <a href="#" id="click">Click for Show/hide</a>

        <p id="showtext">This text will show/hide</p>...etc dynamicly generated content

    </body>

</html>

Answer 1

由于id必须是唯一的，因此您需要使用class：

<a href="#" class="click">Click for Show/hide</a>
<p class="showtext">This text will show/hide</p>

您可以使用$(this)定位当前点击的锚点：

$('.click').click(function() {
    $(this).next().toggle();    
});

<强> Fiddle Demo

Answer 2

的jsfiddle：

http://jsfiddle.net/37ZkH/1/

$(function(){
    $('a').click(function(){
       $(this).next('p').toggle();
    });
});

Answer 3

不要对多个元素使用相同的id id属性必须是唯一的;使用类和元素嵌套/兄弟代替。

因此，将id切换为类，并使用单击处理程序中的this来引用所单击的元素。

代码：

$(document).ready(function () {
    $(".showtext").hide();
    $(".click").click(function () {
        $(this).next(".showtext").toggle();
    });
});

演示：http://jsfiddle.net/a76qB/

Answer 4

这是工作小提琴jsfiddle

  <p class="showtext">This text will show/hide</p> 
  <a href="#" class="click">Click for Show/hide</a><br/>
   $(".click").click(function() { 
     $(this).prev("p").toggle();
  });

jquery为每个元素独立切换功能

4 个答案: