努力根据数据库中的动态数据扩展div(注释功能)

我一直在为这个常见的社交网络功能而苦苦挣扎。我想做的是扩展div以显示评论，我相信你知道我在说什么。

用户发送的每个post都会自动回显锚链接Comments。如前所述，单击此链接时，它将简单地展开显示分配给该thought_id的所有注释的div。

即使没有为帖子分配评论，我仍然希望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锚链接的地方。由于它很长，我将 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 的表，它存储所有评论并将其链接到post_id分配给它的thought。
目前，当我单击comments时没有任何反应。

首先，下面是一个基于代码要实现的目标的工作示例。

我不得不去掉 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 属性，这是正确显示所必需的。因此，我们将其设置为常用的"#"，表示空白锚点。然后，我们需要捕获此链接上的单击事件并阻止其默认操作，这样我们就不会在我们的 url 中看到那个丑陋的 #
您应该避免在 php var 中存储大块的 html，然后echo它，而是使用 html 模板。
您应该避免在代码中混合PHP和javascript，例如将php var分配给js one var id = <?php echo $thought_id; ?>;相反，您可以将thought_ids存储为链接的数据属性，并在以后使用 jQuery 的 data（）轻松获取它们。

爪哇语

$(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的新手，你应该考虑阅读这个页面，以了解第一行的作用以及为什么需要它。（指将代码封装到$(function() {...});中）

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

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

CSS 问题更新

请参阅我针对您的 CSS 问题的更新小提琴，我删除了浮动内联样式并使用相对于message_wrapper的绝对定位div.mini_nav定位。我认为这个问题与原始问题无关，应该在另一个问题中提出。

PHP 代码根据 OP 的

<?php
$thought_id         = 1;
$num_of_comments    = 10;
$comment_posted_by  = "Me";
$comment_body       = "test comment body";
//hard coded above vars to achieve assumptions
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 href='' 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>";
?>

JavaScript

<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";
        }
        return false;
    }
</script>

上面的代码对我有用，根据单个记录。

现在，当您在"jQuery

您可以简单地使用

$(".message_wrapper .mini_nav a[href!='']").click(function() {
    $(this).parent().next().toggle();
});

您可以简单地使用 <details> HTML 标签作为披露三角形。

<details>
    <summary>View comments</summary>
    <ul>
        <li>You comments</li>
        <li>You comments</li>
        <li>You comments</li>
    </ul>
</details>

https://developer.mozilla.org/en/docs/Web/HTML/Element/details

唯一的问题是可爱的IE浏览器不支持它。

如果我正确理解您的问题，这就是您要查找的 https://jsfiddle.net/vrqsz3ev/7/

<div class='message_wrapper'>
 <div class="main-msg-container">
    <div class='where_msg_displayed'>
          <input type="hidden" id="msg-id" value="1">
          <div class='more_options'>    
          MESSAGE1
          </div>
          <div class='mini_nav'>
           <button class="open-comment">comments</button>
         </div>
    </div>

   <div class="hide-mess-details">
     <div class='where_details_displayed'> 
        <div id='toggleComment1'class='new_comment msg-id-1'>
           sachin said: Hii guysss (cmt of msg 1)
        </div>
        <form action='' class="comment-form"method='post' enctype='multipart/form-data'>
    <textarea name='msg' placeholder=' add your     comment...'></textarea>
    <input type='submit' name='send' value='Share'/> 
       </form>
    </div>
 </div>
</div>

我用jQuery做到了
在查看代码时要注意的一些事项是

使用 css3 中的 flexbox 概念来设置它的样式。
如果您单击"share"按钮，则只会更新相应消息的注释。为了检查，我在单击按钮时comment表单一起添加了一个消息 ID。为了检查目的，如果您单击share button，我添加了一个警报（相应消息的消息 ID）
现在您可以使用 php 在 .where_msg_displayed 下添加消息
在.where_details_displayed下显示所有评论（如果需要，您可以在相应的消息下添加详细信息 - 几乎不需要编辑）

如果您继续使用此代码，只需进行少量编辑即可达到上述要求。

HTML/PHP

爪哇语

CSS 问题更新

相关内容

最新更新

热门标签：