gpt4 book ai didi

javascript - 努力根据数据库中的动态数据扩展div(评论功能)

转载 作者:行者123 更新时间:2023-11-28 06:16:02 25 4
gpt4 key购买 nike

我已经在这个常见的社交网络功能上苦苦挣扎了一段时间了。我想做的是扩展 div 以显示评论,我相信你知道我在说什么。

每个post用户发送的内容会自动回显 anchor 链接 Comments 。如前所述,当单击此链接时,它将简单地展开 div,显示分配给该 thought_id 的所有评论。 .

即使没有为帖子分配评论,我仍然希望 div 展开以显示文本字段,以便任何用户都可以发表评论,最好回显以下内容:

<?php
<form action='' method='post' enctype='multipart/form-data'>
<table style='width:850px;'>
<tr>
<td><textarea name='msg' rows='2' maxlength='255' cols='80' placeholder=' add your comment...'></textarea></td>
<td><input type='submit' name='send' value='Share'/> </td>
</tr>
</table>
</form>
?>

这是我到目前为止所拥有的:

<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>

这里是 comments找到 anchor 链接。由于它相当冗长,我已将 echo 的内容减少为仅相关代码:

echo "<div class='message_wrapper'>

<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>

// Options, and display picture of the user who posted the
// thought can be found here.

</div>
</div>

<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>

// Below is the comments anchor link.
<a onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>

</div>

// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>

</div>
</div>";

其他信息:

  • $thought_id是用户发帖的 ID。 (表user_thoughts,列id)。
  • 我还有另一个表,名为 user_comments ,它存储所有评论并将其链接到 thought它被分配给 post_id .
  • 目前,当我点击 comments 时,没有任何反应。 .

最佳答案

首先,here是您想要根据代码实现的目标的工作示例。

我必须去掉 php 部分,因为 jsfiddle 不会解释它,所以接下来是包含 PHP 位的代码。

当您将 jquery 标签添加到问题中时,我假设您已经加载了 jQuery。

要知道为什么您尝试的方法不起作用很复杂,因为我们缺少重要的部分,例如:如何将内容加载到 DOM 中?动态或非动态(ajax?)

HTML/PHP

<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
</div>
</div>

<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
<a href="#" class="toggle-comment" data-id="<?=$thought_id?>" style='padding-left: 5px;'> Comments (<?=$num_of_comments?>) </a>
</div>
<div id='toggleComment<?=$thought_id?>' class='new_comment' style='display:none;'>
<br/> <?=$comment_posted_by?> said: <?=$comment_body?>
</div>
</div>
</div>
  • 您的链接缺少 href 属性,该属性是正确显示所必需的。所以我们将其设置为常用的“#”,表示空白 anchor 。然后,我们需要捕获此链接上的点击事件并阻止其默认操作,这样我们就不会在网址中看到丑陋的 #
  • 您应该避免在 php var 中存储大块 html,然后 echo它而是使用 html 模板。
  • 您应该避免混合 PHP 和 javascript,就像代码中的这一行将 php 变量分配给 js 变量 var id = <?php echo $thought_id; ?>;相反,您可以将您的thought_ids存储为链接的数据属性,并使用jQuery的data()轻松获取它们。稍后。

Javascript

$(function() {
$("a.toggle-comment").on("click", function(event) {
// prevents browser to go to href's #
event.preventDefault();

// uses Jquery's data() function to get comment id from link's data-id attribute
var id = $(this).data('id');

// get element by id and toggle display
var ele = document.getElementById("toggleComment" + id);
$(ele).toggle();
});
});

这里我去掉了你的toggle()函数,并将其替换为使用jQuery的on()的处理函数。每次我们单击包含 toggle-comment 的链接时都会调用该函数CSS 类。它的优点是可以在页面加载后动态添加内容。 jQuery 的 on() 文档页面很好地解释了这一点(以及已弃用的 live() 页面)

请注意,您需要添加此 toggle-comment为您的每一位上课Comments (X)链接

如果您是 jQuery 新手,您应该考虑阅读 this page了解第一行的作用以及为什么需要它。 (指将您的代码封装到 $(function() {...}); 中)

event.preventDefault();告诉浏览器在单击链接时不执行其默认行为(即转到该链接并将 # 附加到地址栏)

$(this).data('id');读取将单击的链接 (this) 放入 jQuery 对象中,并使用 data() 获取其 data-id 属性的值,该值设置为 $thought_id

CSS 问题更新

查看我的updated fiddle对于您的CSS问题,我删除了 float 内联样式并使用相对于message_wrapper的绝对定位来定位div.mini_nav。我认为这个问题与原来的问题无关,应该在另一个问题中提出。

关于javascript - 努力根据数据库中的动态数据扩展div(评论功能),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35958638/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com