我已经被卡住了几个小时,谷歌搜索,但仍然无法解决。我将感谢一些指导。我在一个PHP项目中包括一个类似论坛的页面,我正在研究用户可以在其中评论帖子,然后为个人评论提供答复。我的挑战是在代码的回复部分。我在评论后放置了一个回复按钮,然后单击时,我会淡入淡出以显示一个文本方面,用户可以输入其答复。现在,当我单击"回复"按钮时,它会逐渐消失。我尝试引入带有邮政ID值的数据属性(数据ID(,以绑定单击的回复按钮以显示特定的文本方面,但我似乎无法将其缠绕在此方面。任何帮助将不胜感激。我的PHP代码在这里:
<?php
require("includes/conn.php");
$stmt=$conn->prepare("SELECT post_id, user, topic, post, time FROM post_tb ORDER BY time DESC");
$stmt->execute();
$result = $stmt->get_result();
$num_of_rows = $result->num_rows;
if ($num_of_rows > 0){
while ($row = $result->fetch_assoc()){
$post_id = $row['post_id'];
$user = $row['user'];
$topic = $row['topic'];
$post = $row['post'];
$time = $row['time'];
$time = date('M dS, Y g:i A', strtotime($time));
echo '<div>
<div>
<h5><strong>'.$user.'</strong></h5><h6>'.$time.'</h6>
<h5><strong>'.ucfirst($topic).'</strong></h5>
<p data-id="'.$post_id.'">'.$post.'</p>
</div>
<div>
<button type="button" class="btn btn-primary rep" id="but_rep" data-id="'.$post_id.'">Reply</button>
</div>
<form id="comment_reply" data-id="'.$post_id.'" method="post" action="">
<input type="hidden" class="hidden" value="'.$post_id.'" id="post_id">
<textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea>
<button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button>
</form>
<div/>';
}
}
?>
和我的jQuery在这里:
<script>
$(document).on('click', 'button#but_rep', function(e){
e.preventDefault();
var buttonId = $('form input#post_id').val();
//$('button#but_rep[data-id="buttonId"]').fadeOut();
//$('form#comment_reply[data-id="buttonId"]').fadeIn();
$(this).fadeOut();
$("form#post_comment_reply").fadeIn();
});
</script>
无需使用 data
属性,您可以只使用 .closest()
和 .next()
$(document).on('click' , '.rep' , function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent();
closestDiv.fadeOut();
closestDiv.next('form').show();
});
注意:
id="but_rep"
,id="comment_reply"
ID必须是唯一的。 一个元素..使用class=
获取更多元素
演示
$(document).ready(function(){
$(document).on('click' , 'button.rep' , function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
//closestDiv.fadeOut();
$('.comment_reply').not(closestDiv.next('.comment_reply')).hide();
//$('.rep').closest('div').not(closestDiv).show()
closestDiv.next('form.comment_reply').slideToggle(100);
});
});
form.comment_reply{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button type="button" class="btn btn-primary rep" data-id="">Reply</button>
</div>
<form class="comment_reply" data-id="" method="post" action="">
<input type="hidden" class="hidden" value="" class="post_id">
<textarea class="form-control" rows="3" name="post_rep" class="post_rep"></textarea>
<button type="submit" class="btn btn-primary" class="post_rep_sub">Submit</button>
</form>
<div>
<button type="button" class="btn btn-primary rep" data-id="">Reply</button>
</div>
<form class="comment_reply" data-id="" method="post" action="">
<input type="hidden" class="hidden" value="" class="post_id">
<textarea class="form-control" rows="3" name="post_rep" class="post_rep"></textarea>
<button type="submit" class="btn btn-primary" class="post_rep_sub">Submit</button>
</form>
<div>
<button type="button" class="btn btn-primary rep" data-id="">Reply</button>
</div>
<form class="comment_reply" data-id="" method="post" action="">
<input type="hidden" class="hidden" value="" class="post_id">
<textarea class="form-control" rows="3" name="post_rep" class="post_rep"></textarea>
<button type="submit" class="btn btn-primary" class="post_rep_sub">Submit</button>
</form>