在使用jquery单击时显示/隐藏动态div

Question

这是场景，我有一个php脚本来显示数据库中的动态数据。 从查询中获取的记录数每天可能会有所不同，因此它是非常动态的。

<a href="#" id='link1' class="showhide">This is Div Content 1</a><br>
<div id='content1' class='more'>contents 1</div>

<a href="#" id='link2' class="showhide">This is Div Content 2</a><br>
<div id='content2' class='more'>contents 2</div>

<a href="#" id='link3' class="showhide">This is Div Content 3</a><br>
<div id='content3' class='more'>contents 3</div>


$("#link1").on('click', function(){
        $("#content1").slideToggle();
        return false;
    });



$("#link2").on('click', function(){
        $("#content2").slideToggle();
        return false;
    });


$("#link3").on('click', function(){
        $("#content3").slideToggle();
        return false;
    });

我现在就是这样做的，但这不是动态的。 如果记录数为4，则为showhide隐藏。 第四个链接将不起作用。

id：link1，link2，link3和content1,2,3是从php循环中萌发的，它将是唯一的。

JsFiddle显示样本

Answer 1

// jQuery 1.4.3+
$('body').delegate( '.showhide', 'click', function(e){
  $(this).next('.more').slideToggle();
  return false;
});


// jQuery 1.7+
$( 'body' ).on( 'click', '.showhide', function(e){
  $(this).next('.more').slideToggle();
  return false;
});

了解有关事件委托的信息

Answer 2

可能有更清洁的方法来实现此目的，但是绑定函数中具有所需的所有信息。

$('a.showhide').on('click', function(){
    $('#content'+this.id.slice(-1)).slideToggle();
});

在这里，您可以访问http://jsfiddle.net/devm33/ysBR6/

Answer 3

您可以使用data-* attributes

HTML

<a href="#" class="showhide" data-toggle="slide" data-target="slide1">
    This is Div Content 3
</a>
<br>
<div class='more' data-more="slide1">contents 3</div>

JavaScript的

$('.showhide[data-toggle="slide"]').on('click', function()
{
    $('.more[data-more="' + $(this).data('target') + '"]').slideToggle();
    return false;
});