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

Question

我已经在这个常见的社交网络功能上苦苦挣扎了一段时间了。我想做的是扩展 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 时，没有任何反应。 .

Answer 1

首先，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。 我认为这个问题与原来的问题无关，应该在另一个问题中提出。