2
votes

Parcourez un ensemble de formulaires et affichez le formulaire approprié lorsqu'un bouton est cliqué

Ma section de commentaires comporte un bouton "Répondre". Je veux afficher le formulaire approprié si le bouton de réponse est cliqué. (Les commentaires vont jusqu'à 5)

J'ai essayé le code ci-dessous et cela ne fonctionne pas pour moi

<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>

Lorsque je clique sur le bouton Répondre, rien ne se passe. ..

Permettez-moi de préciser la question.

J'ai une page Web qui affiche un fichier (stocké dans la base de données) lorsque quelqu'un le visite (utilisateur ou invité connecté).

Lorsque le fichier est affiché, viennent ensuite les commentaires (également stockés dans la base de données) pour le fichier. Chaque commentaire a un bouton qui dit "Répondre" et un formulaire de réponse à l'intérieur d'un div. Le div est masqué par défaut.

Notez que le commentaire est supérieur à 1. Je souhaite donc afficher le formulaire de réponse approprié lorsque vous cliquez sur le bouton de réponse ...

Tout le monde sait meilleure façon d'y parvenir.

J'espère que le code ci-dessous vous aidera à comprendre ce que je recherche ...

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

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

javascript jquery html

5 commentaires

Remplacez <= par <. L'index du tableau commence à 0, donc vous obtiendrez l'index du tableau hors des limites pour la dernière itération.

Où ajoutez-vous un écouteur d'événement click ?

Veuillez décrire le HTML avec l'événement click de votre code JS.

Ça ne marche pas trop

c'est la balise html Répondre

3 Réponses :

1
votes

Vous avez mal orthographié le mot «longueur» dans comment.length , en guise de remarque supplémentaire, vous voudrez peut-être changer ce nom de variable en «commentaires» car il contient plusieurs commentaires.

De plus, comme mentionné ci-dessus, vous n'avez pas besoin de <= , < devrait être suffisant.

3 commentaires

Je l'ai corrigé, rien ne se passe lorsque le bouton est cliqué

Vous devez attacher un gestionnaire d'événements pour appeler votre fonction, comme décrit ci-dessus. Comme ceci: $ ('. Showreply'). Click (function () {$ ('# reply'). Show (); $ (this) .closest ('. Comment'). Append ($ (' #reply '));})

Si cela n'a pas de sens. Je recommanderais de suivre un petit cours jQuery ( css-tricks.com/lodge/learn-jquery < / a>). C'est jQuery assez rudimentaire, donc je pense que quelques principes fondamentaux vous aideraient ici.

1
votes

Si vous utilisez jquery, vous pouvez utiliser la méthode la plus proche pour obtenir un commentaire relatif.

<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>

#reply{
display:none;
}

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

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

4 commentaires

Je ne veux pas afficher une couleur de bordure rouge. Je souhaite afficher un formulaire de réponse lorsque vous cliquez sur le bouton

Cela ne fonctionne pas pour moi aussi. Je mettrai à jour la question et publierai le code complet, afin que vous voyiez ce que j'essaie d'accomplir

J'ai édité la question. Veuillez relire et ajuster votre code si nécessaire

Regardez à nouveau la question. Je l'ai mis à jour et j'ai montré mon code. Vérifiez si vous comprenez ce que je veux accomplir

0
votes

Nous pouvons utiliser la méthode intégrée des frères et sœurs dans jQuery. Voici une démo fonctionnelle.

<!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>

9 commentaires

cela ne fonctionne pas non plus ... Je veux publier tout le code, mais le site ne me le permettra pas. Ils ont dit que mon message avait plus de codes

J'ai édité la question. Veuillez relire et ajuster votre code si nécessaire

Peut-être que cela aide.?

$ ('. form'). hide (); Cela ne masque que le premier formulaire. D'autres sont montrés

Non, il masquera tous les formulaires avec la classe form .

Il ne cache que la première forme.

Exécutez à nouveau dans votre navigateur. J'ai testé deux fois ici. Il doit se cacher.

Je suis sur mobile maintenant. Je montrerai mon extrait de code lorsque je passerai au PC 💻

Regardez à nouveau la question. Je l'ai mis à jour et j'ai montré mon code. Vérifiez si vous comprenez ce que je veux accomplir