我的评论区有一个“回复”按钮。我想要显示适当的形式,如果回复按钮被点击。(评论最多5条)
我试过下面的代码,它对我不起作用
var comment = document.getElementsByClassName('showreply');
function replyComment() {
var i;
for(i = 0; i <= comment.lenght; i++) {
comment[i].style.display='block';
}
}
当我点击回复按钮时,没有任何反应...
让我进一步打破这个问题。
我有一个网页,显示一个文件(存储在数据库中),当有人访问它(登录用户或访客)。
当显示该文件时,接下来是该文件的注释(也存储在数据库中)。每条评论都有一个写着“回复”的按钮和一个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; ?> <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; ?> <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; ?> <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; ?> <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; ?> <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; ?> <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; ?> <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>
发布于 2019-06-05 20:46:30
你在comment.length
中拼写错了“length”这个词,作为附注,你可能想要将变量名改为“comments”,因为它包含多个注释。
同样,正如上面提到的,你不需要<=
,<
就足够了。
发布于 2019-06-05 20:46:49
如果您使用jquery,您可以使用closest方法来获取相关注释。
$('.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>
发布于 2019-06-05 21:15:29
我们可以在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>
https://stackoverflow.com/questions/56460676
复制相似问题