如何在PHP代码中向可编辑按钮添加可折叠表单？我尝试了一些东西，但是没有用

Question

I have been trying for two weeks to add a collapsible button which should reveal the edit-form. 我已经尝试了两个星期来添加一个可折叠的按钮，该按钮应该显示编辑表单。 I found something, but that java code didn't work properly inside my PHP code . 我找到了一些东西，但是Java代码在我的PHP代码中无法正常工作 。 For example, it works two by two and it is very annoying. 例如，它的工作原理是两乘两下，这很烦人。

I tried to add another variables which could change that issue, but didn't work. 我试图添加另一个可以更改该问题的变量，但是没有起作用。 After that, worked three by three. 在那之后，工作三乘三。

<?php 
if(isset($_SESSION['id'])) {
  if($_SESSION['id'] == $row2['id']){

echo "<button type='submit' class='edit-comment'>Edit</button>
  <div class='content'><form class='content edit-form' method='POST' action='".editComments($conn)."'>
  <input type='hidden' name='comment_id' value='".$row['comment_id']."'>
    <input type='hidden' name='user_id' value='".$row['user_id']."'>
    <input type='hidden' name='date' value='".date('d-m-Y H:i:s')."'>
    <textarea class='comment' name='comment'>".$row['comment']."</textarea><br>
    <button id='edit' name='submite' type='submit'>Edit</button>
    </form></div>
    <script>
    var coll = document.getElementsByClassName('edit-comment');
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener('click', function() {
        this.classList.toggle('active');
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + 'px';
        }
      });
    }
    </script>"; ?>

I expect to reveal all the comments, but works just two by two. 我希望透露所有评论，但只能两个接一个地工作。 Here is a picture to understand better what I said: 这是一张图片，可以更好地理解我的意思：

Answer 1

I don't know if the following will be of interest as it's likely I have perhaps misunderstood the problem having not been able to view all the code at this point. 我不知道下面的内容是否会引起人们的兴趣，因为我可能无法正确理解当前无法查看所有代码的问题。 The following will create ( emulate the creation of ) several of these minimised/hidden forms and a single javascript listener is registed for all of them 以下将创建（模拟创建）这些最小化/隐藏形式中的几种，并为所有这些形式注册一个javascript侦听器

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>expanding forms</title>
        <style>
            html *{
                box-sizing:border-box;
                -webkit-transition: all 350ms ease-in-out;
                -moz-transition:    all 350ms ease-in-out;
                -ms-transition:     all 350ms ease-in-out;
                -o-transition:      all 350ms ease-in-out;
                transition:         all 350ms ease-in-out;          
            }
            .content{
                display:none;
                margin:1rem 0;
            }
            .expanded{
                min-height:10rem;
                max-height:10rem;
                height:10rem;
                display:block;
                border:1px solid black;
                padding:0.25rem;
            }
            .minimised{
                height:0rem;
            }
            button.edit-comment{display:block;}
            textarea{
                width:80%;
                height:9.25rem;
                margin:auto;
                resize:none;
            }
            form > button[type='submit']{
                float:right;
                width:10%;
                padding:1rem;
                background:gray;
                color:white;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', e=>{
                Array.prototype.slice.call( document.querySelectorAll('button.edit-comment') ).forEach( function( bttn ){
                    bttn.addEventListener( 'click', function(e){
                        let div=this.nextElementSibling;
                            div.classList.toggle( 'expanded' )
                    });
                });
            });
        </script>
    </head>
    <body>
        <?php
            for( $i=1; $i <=10; $i++ ){
                printf("
                    <button type='submit' class='edit-comment'>Edit</button>
                    <div class='content'>
                        <form class='hidden-content edit-form' method='POST' action='%s'>
                            <input type='hidden' name='comment_id' value='%d'>
                            <input type='hidden' name='user_id' value='%d'>
                            <input type='hidden' name='date' value='%s'>
                            <textarea class='comment' name='comment'>%s</textarea>
                            <button name='sub' type='submit'>Edit</button>
                        </form>
                    </div>",

                    '',
                    $i,
                    $i,
                    date('d-m-Y H:i:s'),
                    'This is a comment #'.$i
                );
            }
        ?>
    </body>
</html>

如何在PHP代码中向可编辑按钮添加可折叠表单？我尝试了一些东西，但是没有用

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-05-19 07:35:24

如何在PHP代码中向可编辑按钮添加可折叠表单？ 我尝试了一些东西，但是没有用

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-05-19 07:35:24

如何在PHP代码中向可编辑按钮添加可折叠表单？我尝试了一些东西，但是没有用

解决方案1
1 已采纳 2019-05-19 07:35:24