这是场景,我有一个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显示样本

===============>>#1 票数: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;
});

了解有关事件委托的信息

===============>>#2 票数:0 已采纳

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

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

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

===============>>#3 票数:0

您可以使用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;
});

  ask by wilson382 translate from so

未解决问题?本站智能推荐: