动态隐藏显示

发布于 2024-09-13 17:17:08 字数 968 浏览 7 评论 0原文

我正在写一个博客,并且我已经设置好它,以便您可以对某个条目发表评论。我不喜欢所有评论和条目表单使用多少垂直空间,因此我希望在您单击的每个条目上有一个链接,它会显示条目表单和评论。我正在考虑一个类似“评论(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();函数只是从数据库中提取评论的 PHP。

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

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

2024-09-20 17:17:08

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

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

其中 a.comment 代表带有 comment 类和 .form 的链接表示包含您的评论的元素的类。

Since you asked for an easier way, I would go for jQuery, no need to assign different ids to them, you just use a class and jQuery will automatically show corresponding element like this:

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

Where a.comment represents a link with class comment and .form represents a class for the element that contains your comments.

左秋 2024-09-20 17:17:08

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

<div class=comments id=comments>

并用纯 JavaScript 显示它:

document.getElementById("comments").style.display = "block"

If it's okay to hide the whole comments div, You can just give it an ID:

<div class=comments id=comments>

and show it with plain JavaScript:

document.getElementById("comments").style.display = "block"
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文