循环遍历一组表单并在单击按钮时显示相应的表单答案

【问题标题】：Loop through set of forms and display the appropriate when a button is clicked循环遍历一组表单并在单击按钮时显示相应的表单
【发布时间】：2019-10-20 23:24:15
【问题描述】：

我的评论部分有一个“回复”按钮。如果单击回复按钮，我想显示适当的表单。（cmets最多5个）

我已经尝试了下面的代码，但它不适合我

var comment = document.getElementsByClassName('showreply');

function replyComment() {
     var i;
     for(i = 0; i <= comment.lenght; i++) {
           comment[i].style.display='block';
     }
}

当我点击回复按钮时，什么都没有发生...

让我进一步打破这个问题。

我有一个网页，当有人访问它（以用户或访客身份登录）时，它会显示一个文件（存储在数据库中）。

显示文件后，接下来是文件的 cmets（也存储在数据库中）。每个评论都有一个显示“回复”的按钮和一个 div 内的回复表单。 div默认是隐藏的。

请注意，评论不止1。所以，我想在点击回复按钮时显示适当的回复表单...

任何人都知道实现这一目标的更好方法。

我希望下面的代码能帮助你理解我在寻找什么......

<div class="music_comments">
                      <div class="comment_title"><i class="far fa-comments"></i> Comments (<?php echo $mcCount; ?>)</div>

                      <!-- Music Comments -->
                      <?php
                      while ($mccinfo = mysqli_fetch_array($mComments)) {
                          $ppid = $mccinfo['ID'];
                          $p = $mccinfo['poster'];

                          if($p != 'Guest') {
                              $poster = getUserInfo2($mccinfo['poster'], 'firstname'). ' ' . getUserInfo2($mccinfo['poster'], 'lastname');
                              $photo = getUserInfo2 ($p, 'photo');
                              $r = "<a href='/$p' title='$poster'>$poster</a>";
                          } else {
                              $poster = 'Guest';
                              $photo = '/images/avatar/avatar5.png';
                              $r = $poster;
                          }


                          $comment = $mccinfo['comment'];
                          $date = $mccinfo['date'];
                          $cq = mysqli_query($conn, "SELECT * FROM banabase_musiccommentreply WHERE commentID=$ppid AND musicID=$id");

                          $clikecount = mysqli_num_rows( mysqli_query($conn, "SELECT * FROM banabase_musicreaction WHERE type=1 AND commentID=$ppid AND musicID=$id"));

                          $cdislikecount = mysqli_num_rows( mysqli_query($conn, "SELECT * FROM banabase_musicreaction WHERE type=2 AND commentID=$ppid AND musicID=$id"));

                        $k = (str_shuffle('ABCDEFGHabcdefgh1234567890'));
                        $resetCode = substr ($k, 0, round(strlen($k)/2, 1));

                        $k2 = md5 (rand(000000, 999999));
                        $k3 = md5 (rand(000000, 999999));
                        $resetCode2 = substr ($k2, 0, round(strlen($k2)/5, 1));
                        $resetCode3 = substr ($k3, 0, round(strlen($k3)/5, 1));

                        $r2 = $resetCode2;
                        $r3 = $resetCode3;

                        $r1 = $r2. $ppid . $resetCode;
                        $r3 = $r3. $id . $resetCode;


                          echo "<div class='comment'>
                          <table cellspacing='5' cellpadding='2'>
                            <tr>
                                <td width='6%'>
                                    <img src='$photo' height='50' width='50' alt='+' title='$poster'> 
                                </td>
                                <td width='94%'>
                                    <p style='margin-top: -2px; margin-bottom: 7px;'>
                                    <small>
                                   $r said:
                                    </small>
                                    <span class='msgtime right'>".timeAgo($date)."<span>
                                    </p>
                                    $comment<br>"; ?>
                                    <small class='comment-action right'>
                                    <a href='/music/react.php?like&cid=<?php echo $r1.'&mid='.$r3; ?>' title='Like'><i class='far fa-thumbs-up'></i></a> <?php echo $clikecount; ?> &nbsp;&nbsp;&nbsp; <a href='/music/react.php?dislike&cid=<?php echo $r1.'&mid='.$r3; ?>' title='Dislike'><i class='far fa-thumbs-down'></i></a> <?php echo $cdislikecount; ?> &nbsp;&nbsp;&nbsp; <a href='#reply' onclick="showForm();" title='Reply this comment'>Reply</a>
                                    </small>


                                <?php echo "</td>
                            </tr>
                        </table>"; ?>


                      <!-- 1st Comment Reply Form -->
                        <div id='comment-reply' class="showreply">
                    <div id="reply" style="position: relative; top: -110px;"></div>
                  <center>
                      <form action="<?php echo htmlspecialchars('#'); ?>" method="post">
                          <h4 style="margin-bottom: 3px; color: #aaa;">Reply this Comment</h4>
                          <input type="hidden" name="poster" value="<?php if(isLoggedIn()) echo $user; else echo 'Guest'; ?>">
                          <input type="hidden" name="musicID" value="<?php echo $id; ?>">
                          <input type="hidden" name="commentID" value="<?php echo $ppid; ?>">
                          <textarea name='comment' width='40' rows='3'></textarea><br>
                          <input type="submit" name="reply" class="btn success" value="Reply">
                      </form>
                  </center>
                        </div>

                      <!-- First Comment Reply-->
                      <?php
                          while ($cr = mysqli_fetch_array($cq)) {

                          $r = $cr['ID'];
                          $rp = $cr['poster'];
                        $rrrcq = mysqli_query($conn, "SELECT * FROM banabase_musiccommentreply WHERE commentID=$r AND musicID=$id");

                        if($rp != 'Guest') {
                            $prp = getUserInfo2($cr['poster'], 'firstname'). ' ' . getUserInfo2($cr['poster'], 'lastname');
                            $rphoto = getUserInfo2 ($rp, 'photo');
                            $rpl = "<a href='/$rp' title='$prp'>$prp</a>";
                        } else {
                            $prp = 'Guest';
                            $rphoto = '/images/avatar/avatar5.png';
                            $rpl = $prp;
                          }

                          $rc = $cr['comment'];
                          $rd = $cr['date'];

                        $rlikecount = mysqli_num_rows( mysqli_query($conn, "SELECT * FROM banabase_musicreaction WHERE type=1 AND commentID=$r AND musicID=$id"));

                        $rdislikecount = mysqli_num_rows( mysqli_query($conn, "SELECT * FROM banabase_musicreaction WHERE type=2 AND commentID=$r AND musicID=$id"));

                        $k = (str_shuffle('ABCDEFGHabcdefgh1234567890'));
                        $resetCode = substr ($k, 0, round(strlen($k)/2, 1));

                        $k2 = md5 (rand(000000, 999999));
                        $k3 = md5 (rand(000000, 999999));
                        $resetCode2 = substr ($k2, 0, round(strlen($k2)/5, 1));
                        $resetCode3 = substr ($k3, 0, round(strlen($k3)/5, 1));

                        $r2 = $resetCode2;
                        $r3 = $resetCode3;

                        $r1 = $r2. $r . $resetCode;
                        $r3 = $r3. $id . $resetCode;

                              echo "<div class='comment' style='margin-left: 40px; background: #eee;'>
                          <table cellspacing='5' cellpadding='2'>
                            <tr>
                                <td width='6%'>
                                    <img src='$rphoto' height='50' width='50' alt='+' title='$prp'> 
                                </td>
                                <td width='94%'>
                                    <p style='margin-top: -2px; margin-bottom: 7px;'>
                                    <small>
                                    $rpl replied:
                                    </small> 
                                    <span class='msgtime right'>".timeAgo($rd)."<span>
                                    </p>
                                    $rc<br>"; ?>

                                    <small class='comment-action right'>
                                    <a href='/music/react.php?like&cid=<?php echo $r1.'&mid='.$r3; ?>' title='Like'><i class='far fa-thumbs-up'></i></a> <?php echo $rlikecount; ?> &nbsp;&nbsp;&nbsp; <a href='/music/react.php?dislike&cid=<?php echo $r1.'&mid='.$r3; ?>' title='Dislike'><i class='far fa-thumbs-down'></i></a> <?php echo $rdislikecount; ?> &nbsp;&nbsp;&nbsp; <a href='#reply' onclick="showForm();" title='Reply this comment'>Reply</a>
                                    </small>

                      <!-- Second Comment Reply Form-->
                      <div id='comment-reply' class="showreply">
                    <div id="reply" style="position: relative; top: -110px;"></div>
                  <center>
                      <form action="<?php echo htmlspecialchars('#'); ?>" method="post">
                          <h4 style="margin-bottom: 3px; color: #aaa;">Reply this Comment</h4>
                          <input type="hidden" name="poster" value="<?php if(isLoggedIn()) echo $user; else echo 'Guest'; ?>">
                          <input type="hidden" name="musicID" value="<?php echo $id; ?>">
                          <input type="hidden" name="commentID" value="<?php echo $r; ?>">
                          <textarea name='comment' width='40' rows='3'></textarea><br>
                          <input type="submit" name="reply" class="btn success" value="Reply">
                      </form>
                  </center>
                        </div>

                      <!-- Second Comment Reply-->

                      <?php echo "
                                </td>
                            </tr>
                        </table>";


                        while ($rrrcr = mysqli_fetch_array($rrrcq)) {
                          $rrrr = $rrrcr['ID'];
                          $rrrrp = $rrrcr['poster'];
                            $rrcq = mysqli_query($conn, "SELECT * FROM banabase_musiccommentreply WHERE commentID=$rrrr AND musicID=$id");

                        if($rrrrp != 'Guest') {
                            $rrrprp = getUserInfo2($rrrcr['poster'], 'firstname'). ' ' . getUserInfo2($rrrcr['poster'], 'lastname');
                            $rrrrphoto = getUserInfo2 ($rrrrp, 'photo');
                            $rrrrpl = "<a href='/$rp' title='$rrrprp'>$rrrprp</a>";
                        } else {
                            $rrrprp = 'Guest';
                            $rrrrphoto = '/images/avatar/avatar5.png';
                            $rrrrpl = $rrrprp;
                          }

                          $rrrrc = $rrrcr['comment'];
                          $rrrrd = $rrrcr['date'];

                        $r2likecount = mysqli_num_rows( mysqli_query($conn, "SELECT * FROM banabase_musicreaction WHERE type=1 AND commentID=$rrrr AND musicID=$id"));

                        $r2dislikecount = mysqli_num_rows( mysqli_query($conn, "SELECT * FROM banabase_musicreaction WHERE type=2 AND commentID=$r AND musicID=$id"));

                        $k = (str_shuffle('ABCDEFGHabcdefgh1234567890'));
                        $resetCode = substr ($k, 0, round(strlen($k)/2, 1));

                        $k2 = md5 (rand(000000, 999999));
                        $k3 = md5 (rand(000000, 999999));
                        $resetCode2 = substr ($k2, 0, round(strlen($k2)/5, 1));
                        $resetCode3 = substr ($k3, 0, round(strlen($k3)/5, 1));

                        $r2 = $resetCode2;
                        $r3 = $resetCode3;

                        $r1 = $r2. $rrrr . $resetCode;
                        $r3 = $r3. $id . $resetCode;


                              echo "<div class='comment' style='margin-left: 40px;'>
                          <table cellspacing='5' cellpadding='2'>
                            <tr>
                                <td width='6%'>
                                    <img src='$rrrrphoto' height='50' width='50' alt='+' title='$rrrprp'> 
                                </td>
                                <td width='94%'>
                                    <p style='margin-top: -2px; margin-bottom: 7px;'>
                                    <small>
                                    $rrrrpl replied:
                                    </small> 
                                    <span class='msgtime right'>".timeAgo($rrrrd)."<span>
                                    </p>
                                    $rrrrc<br>"; ?>

                                    <small class='comment-action right'>
                                    <a href='/music/react.php?like&cid=<?php echo $r1.'&mid='.$r3; ?>' title='Like'><i class='far fa-thumbs-up'></i></a> <?php echo $r2likecount; ?> &nbsp;&nbsp;&nbsp; <a href='/music/react.php?dislike&cid=<?php echo $r1.'&mid='.$r3; ?>' title='Dislike'><i class='far fa-thumbs-down'></i></a> <?php echo $r2dislikecount; ?> &nbsp;&nbsp;&nbsp; <a href='#reply' onclick="showForm();" title='Reply this comment'>Reply</a>
                                    </small>

                      <!-- Other Comment Reply Form-->

                      <div id='comment-reply' class="showreply">
                    <div id="reply" style="position: relative; top: -110px;"></div>
                  <center>
                      <form action="<?php echo htmlspecialchars('#'); ?>" method="post">
                          <h4 style="margin-bottom: 3px; color: #aaa;">Reply this Comment</h4>
                          <input type="hidden" name="poster" value="<?php if(isLoggedIn()) echo $user; else echo 'Guest'; ?>">
                          <input type="hidden" name="musicID" value="<?php echo $id; ?>">
                          <input type="hidden" name="commentID" value="<?php echo $rrrr; ?>">
                          <textarea name='comment' width='40' rows='3'></textarea><br>
                          <input type="submit" name="reply" class="btn success" value="Reply">
                      </form>
                  </center>
                        </div>

                      <?php echo "
                                </td>
                            </tr>
                        </table>";

                        while ($rrcr = mysqli_fetch_array($rrcq)) {
                          $rrr = $rrcr['ID'];
                          $rrrp = $rrcr['poster'];

                        if($rrrp != 'Guest') {
                            $rrprp = getUserInfo2($rrcr['poster'], 'firstname'). ' ' . getUserInfo2($rrcr['poster'], 'lastname');
                            $prrphoto = getUserInfo2 ($rrrp, 'photo');
                            $rrrpl = "<a href='/$rrrp' title='$rrprp'>$rrprp</a>";
                        } else {
                            $rrprp = 'Guest';
                            $prrphoto = '/images/avatar/avatar5.png';
                            $rrrpl = $rrprp;
                          }
                          $prrc = $rrcr['comment'];
                          $rrrd = $rrcr['date'];


                        $r3likecount = mysqli_num_rows( mysqli_query($conn, "SELECT * FROM banabase_musicreaction WHERE type=1 AND commentID=$rrr AND musicID=$id"));

                        $r3dislikecount = mysqli_num_rows( mysqli_query($conn, "SELECT * FROM banabase_musicreaction WHERE type=2 AND commentID=$rrr AND musicID=$id"));

                        $k = (str_shuffle('ABCDEFGHabcdefgh1234567890'));
                        $resetCode = substr ($k, 0, round(strlen($k)/2, 1));

                        $k2 = md5 (rand(000000, 999999));
                        $k3 = md5 (rand(000000, 999999));
                        $resetCode2 = substr ($k2, 0, round(strlen($k2)/5, 1));
                        $resetCode3 = substr ($k3, 0, round(strlen($k3)/5, 1));

                        $r2 = $resetCode2;
                        $r3 = $resetCode3;

                        $r1 = $r2. $rrr . $resetCode;
                        $r3 = $r3. $id . $resetCode;


                              echo "<div class='comment' style='margin-left: 40px; background: #eeee;'>
                          <table cellspacing='5' cellpadding='2'>
                            <tr>
                                <td width='6%'>
                                    <img src='$prrphoto' height='50' width='50' alt='+' title='$rrprp'> 
                                </td>
                                <td width='94%'>
                                    <p style='margin-top: -2px; margin-bottom: 7px;'>
                                    <small>
                                    $rrrpl replied:
                                    </small> 
                                    <span class='msgtime right'>".timeAgo($rrrd)."<span>
                                    </p>
                                    $prrc<br>"; ?>

                                    <small class='comment-action right'>
                                    <a href='/music/react.php?like&cid=<?php echo $r1.'&mid='.$r3; ?>' title='Like'><i class='far fa-thumbs-up'></i></a> <?php echo $r3likecount; ?> &nbsp;&nbsp;&nbsp; <a href='/music/react.php?dislike&cid=<?php echo $r1.'&mid='.$r3; ?>' title='Dislike'><i class='far fa-thumbs-down'></i></a> <?php echo $r3dislikecount; ?>
                                    </small>

                      <?php 
                echo "
                                </td>
                            </tr>
                        </table>
                        </div>";
                        }
                echo "
                                </td>
                            </tr>
                        </table>
                        </div>";
                        }

                echo "
                        </div>";
                        }

                echo "
                        </div>";
                        }

                          ?>
                  </div>
                  <div id="addcomment" style="position: relative; top: -70px;"></div>
                  <center>
                      <form action="<?php echo htmlspecialchars('#'); ?>" method="post">
                          <h4 style="margin-bottom: 3px; color: #aaa;">Add a Comment</h4>
                          <input type="hidden" name="poster" value="<?php if(isLoggedIn()) echo $user; else echo 'Guest'; ?>">
                          <input type="hidden" name="musicID" value="<?php echo $id; ?>">
                          <textarea name='comment' width='40' rows='3'></textarea><br>
                          <input type="submit" name="submit" class="btn success" value="Comment">
                      </form>
                  </center>

【问题讨论】：

将<= 更改为<。数组索引从 0 开始，因此您将在最后一次迭代中获得超出范围的数组索引。
你在哪里添加click事件监听器？
请描述HTML以及您的JS代码的click事件。
也不行
这是html标签<a href='#reply' onclick="replyComment();" title='Reply this comment'>Reply</a>

标签： javascript jquery html

【解决方案1】：

您在comment.length 中拼错了“长度”一词，作为旁注，您可能需要将该变量名称更改为“cmets”，因为它包含多个评论。

如上所述，您不需要<=，< 就足够了。

【讨论】：

我已经更正了，点击按钮没有任何反应
你必须附加一个事件处理程序来调用你的函数，如上所述。像这样：$('.showreply').click(function(){ $('#reply').show(); $(this).closest('.comment').append($('#reply')); })
如果这没有意义。我建议参加一个简短的 jQuery 课程 (css-tricks.com/lodge/learn-jquery)。这是相当基本的 jQuery，所以我认为一些基础知识会帮助你。

【解决方案2】：

如果你使用jquery，你可以使用最接近的方法来获取相关评论。

$('.showreply').click(function(){
   $(this).closest('.comment').css('border', '1px solid red');
})

$('.showreply').click(function(){
$('#reply').show();
$(this).closest('.comment').append($('#reply'));
})

#reply{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='allcomment'>
<div class='comment'>
<textarea>Test</textarea>
<button class='showreply'>Reply</button>
</div>

<div class='comment'>
<textarea>Test</textarea>
<button class='showreply'>Reply</button>
</div>

<div class='comment'>
<textarea>Test</textarea>
<button class='showreply'>Reply</button>
</div>

<form id='reply'>
Reply here
<textarea></textarea>
</form>
</div>

【讨论】：

我不想显示红色边框颜色。我想在点击按钮时显示回复表单
这对我也不起作用。我将更新问题并发布完整代码，以便您了解我想要实现的目标
我已经编辑了这个问题。请再次阅读并在必要时调整您的代码
再看问题。我已经更新了它并显示了我的代码。检查一下你是否理解我想要实现的目标

【解决方案3】：

我们可以在 jQuery 中使用兄弟内置方法。这是工作演示。

<!DOCTYPE html>
<html>
<head>
    <title>Demonstrating Jquery siblings()</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.form').hide(); //Initially hide all comment form

            $('.showreply').click(function(){
                $(this).siblings('.form').slideDown();
            });
        });
    </script>
    <style>
    .cmnt {
        margin:10px 0 10px 0;
    }
    </style>
</head>
<body>
<div class='allcomment'>

    <div class='comment'>
        <br/><br/>
        <textarea>File 1</textarea><br />
        <div class="cmnt">
            Coment testing sample text...
            <button class='showreply'>Reply</button><br />
            <div class="form">
                <input type="text"  placeholder="Field 1" />
                <input type="text"  placeholder="Field 2" />
            </div>
        </div>
        <div class="cmnt">
            Coment testing sample text...
            <button class='showreply'>Reply</button><br />
            <div class="form">
                <input type="text"  placeholder="Field 1" />
                <input type="text"  placeholder="Field 2" />
            </div>
        </div>
    </div>

    <div class='comment'>
        <br/><br/>
        <textarea>File 2</textarea><br />
        <div class="cmnt">
            Coment testing sample text...
            <button class='showreply'>Reply</button><br />
            <div class="form">
                <input type="text"  placeholder="Field 1" />
                <input type="text"  placeholder="Field 2" />
            </div>
        </div>
        <div class="cmnt">
            Coment testing sample text...
            <button class='showreply'>Reply</button><br />
            <div class="form">
                <input type="text"  placeholder="Field 1" />
                <input type="text"  placeholder="Field 2" />
            </div>
        </div>
        <div class="cmnt">
            Coment testing sample text...
            <button class='showreply'>Reply</button><br />
            <div class="form">
                <input type="text"  placeholder="Field 1" />
                <input type="text"  placeholder="Field 2" />
            </div>
        </div>
    </div>

</div>

</body>
</html>

【讨论】：

这也不起作用...我想发布整个代码，但网站不允许我发布。他们说我的帖子有更多代码
我已经编辑了这个问题。请再次阅读并在必要时调整您的代码
这可能有帮助吗？
$('.form').hide(); 这只会隐藏第一个表单。显示其他人
不，它会隐藏所有带有form类的表单。