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

【问题标题】：show/hide dymamic div on click with jquery使用 jquery 单击时显示/隐藏动态 div
【发布时间】：2014-04-19 23:32:18
【问题描述】：

这是场景，我有一个显示数据库动态数据的 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。第 4 个链接无效。

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

JsFiddle Showing a Sample

【问题讨论】：

标签： javascript php jquery html

【解决方案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;
});

read about event delegation

【讨论】：

【解决方案2】：

可能有更简洁的方法来实现这一点，但您在绑定函数中拥有所需的所有信息。

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

给你http://jsfiddle.net/devm33/ysBR6/

【讨论】：

【解决方案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;
});

【讨论】：