Javascript 动态地使div在href单击时展开

我正在尝试基于锚链接单击动态扩展div。锚定链接，

查看评论

将根据单击链接展开并显示用户评论

我有一个包含以下两个相关表的数据库：

user_thoughts
  id
  message
  added_by

而且

user_comments
  id
  body_of_msg
  comment_posted_by
  comment_posted_to
  post_id

我有以下疑问：

$get_thoughts_from_db = mysqli_query($connect, "SELECT * FROM user_thoughts WHERE added_by='$user' ORDER BY id DESC LIMIT 10");
while ($row = mysqli_fetch_assoc($get_thoughts_from_db)) {
    $thought_id      = $row['id'];
    $message_content = $row['message'];
    $thoughts_by     = $row['added_by'];

另一个是从user_comments表中获取数据

// Get the comments attahed to a users post...
$get_comm = mysqli_query ($connect, "SELECT * FROM user_comments WHERE post_id='$thought_id' ORDER BY post_id DESC");
$comment = mysqli_fetch_assoc ($get_comm);
    $comment_body           = $comment['body_of_msg'];
    $comment_posted_to      = $comment['comment_posted_to'];
    $comment_posted_by      = $comment['comment_posted_by'];
    $removed                = $comment['comment_removed'];

用户的每一个想法都是回音的，但当我按

查看注释时

，它不会在div中加载注释

以下是我尝试过的：

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

函数切换（）{
var ele=document.getElementById（“toggleComment”）；
var text=document.getElementById（“displayComment”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
}否则{
ele.style.display=“块”；
}
}

这里是评论和链接的地方

<div class='mini_nav' style='float: right;'>
                                <span class='glyphicon glyphicon-heart-empty' data-clicked='false' aria-hidden='true'></span> 
                                <span style='padding-left: 5px; padding-right: 5px;'> | </span>
                                <a href='#' onClick='javascript:toggle$thought_id()'> View comments </a> 
                            <div id='toggleComment$thought_id' style='display:none;'>
                                <br/> $message_content
                            </div>

| 

$message\u内容

---

我完全希望我的javascript能够正常工作，但它不会加载与思想id相同的帖子id的注释。

您可以像这样创建JS函数：

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

功能切换（id）{
var ele=document.getElementById（“toggleComment”+id）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
}否则{
ele.style.display=“块”；
}
}

并定义您的html：

<div class='mini_nav' style='float: right;'>
    <span class='glyphicon glyphicon-heart-empty' data-clicked='false' aria-hidden='true'></span>
    <span style='padding-left: 5px; padding-right: 5px;'> | </span>
    <a href='#' onclick='toggle($thought_id)'> View comments </a>
    <div id='toggleComment$thought_id' style='display:none;'>
        <br/> $message_content
    </div>
</div>

| 

$message\u内容

您正在为每个元素构建函数？

toggle（）

不会创建有效的函数名。至少需要删除空间。