时间戳

首页 > 解决方案 > 如何将可折叠表单添加到 PHP 代码中的编辑按钮？我尝试了一些东西，但没有用

javascript - 如何将可折叠表单添加到 PHP 代码中的编辑按钮？我尝试了一些东西，但没有用

问题描述

我已经尝试了两个星期来添加一个可以显示编辑表单的可折叠按钮。我发现了一些东西，但是那个java 代码在我的 PHP 代码中不能正常工作。例如，它两个两个工作，非常烦人。

我试图添加另一个可以改变这个问题的变量，但没有奏效。之后，三三两两地工作。

<?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>"; ?>

我希望公开所有评论，但只能两两合作。这是一张图片，可以更好地理解我所说的：

标签： javascriptphp

解决方案

我不知道以下内容是否会引起人们的兴趣，因为我可能误解了此时无法查看所有代码的问题。以下将创建（模拟创建）这些最小化/隐藏表单中的几个，并为所有这些表单注册一个 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>

推荐阅读