动态隐藏揭示

时间:2010-08-07 21:30:28

标签: php javascript html comments show-hide

我在博客上工作,我已将其设置好,因此您可以对条目发表评论。我不喜欢所有评论和参赛表格使用多少垂直空间,所以我想在你点击的每个条目上都有一个链接,它会显示参赛表格和评论。我在想一个类似“评论(5)”的链接。我一直在其他网站上看到这个,但我不知道如何自己创建它。

这是其中一个条目的一些HTML:

<div class="comments">
<form action="foxpost.php" method="post">

<label for="name">Name</label><br>
<input id="name" name="name" type="text" /><br>
<label for="message">Comment</label><br>
<textarea class="message" id="message" name="message"></textarea><br><br>
<input type="hidden" name="post_id" value="7" />

<input type="Submit" value="Post Comment" />
</form>
<?php
displayComments(7);
?>      

</div>

displayComments(); function只是从数据库中提取注释的PHP。

我唯一能想到的是为每个评论区域更改to并使用不同的ID(例如“comments2”,“comments3”等),然后使用涉及document.getElementByID()的javascript函数.style.display为每个“commentsX”div改变不同的CSS条目。这看起来似乎很臃肿,所以我想知道是否有一种更简单的方法来动态显示和隐藏我的表单以及抓取评论的php函数。

2 个答案:

答案 0 :(得分:2)

既然你要求更简单的方法,我会选择jQuery,不需要为它们分配不同的id,你只需要使用一个类,jQuery会自动显示相应的元素:

$('a.comment').click(function(){
  $(this).nextAll('.form').slideDown('slow');
});

其中a.comment表示与班级comment的链接,而.form表示包含您的评论的元素的类。

答案 1 :(得分:0)

如果可以隐藏整个评论div,你可以给它一个ID:

<div class=comments id=comments>

并使用纯JavaScript显示它:

document.getElementById("comments").style.display = "block"
相关问题