1

I'm working on a blog and I have it set up so you can leave a comment on an entry. I don't like how much vertical space all the comments and the entry form use, so I would like to have a link on each entry that you click and it reveals the entry form and comments. I'm thinking a link that's like "Comments (5)". I see this all the time on other sites but I don't know how to create it myself.

This is some of the HTML for one of the entries:

<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>

The displayComments(); function is just the PHP that pulls the comments from the database.

The only thing I can think of is to change the to and use a different ID (such as "comments2","comments3", etc.) for each comments area, then use a javascript function involving document.getElementByID().style.display to alter a different CSS entry for each "commentsX" div. That just seems bloated though, so I'm wondering if there's an easier way to dynamically reveal and hide my form and php function that grabs the comments.

4

2 回答 2

2

由于您要求更简单的方法，我会选择 jQuery，无需为它们分配不同的 id，您只需使用一个类，jQuery 将自动显示相应的元素，如下所示：

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

wherea.comment表示与 class 的链接，comment并.form表示包含您的评论的元素的类。

于 2010-08-07T21:35:33.667 回答
0

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

<div class=comments id=comments>

并用纯 JavaScript 显示它：

document.getElementById("comments").style.display = "block"
于 2010-08-07T21:43:27.393 回答