如何通过JavaScript实现评论下的回复的回复?

如何通过JavaScript实现评论下的回复的回复?

需求:在这里插入图片描述
通过图中可以看出一个帖子下有有评论列表,单个评论下有回复列表,同时点击回复者的名字后还可以进行回复。
那么这个过程是怎么实现的呢?接下来解释一下他们之间的关系。帖子的id是这个过程中最重要的一个字段。评论表中的一个外键是就是帖子的id,而回复中也有一个外键是帖子的id,另一个外键是回复表的id。回复表中还有一个自身外键(回复表id->回复表pid)。
确定他们之间的关系后,先 将他们显示出来,如上图。该页面是jsp页面,所以通过jstl标签库将他们显示出来,具体先不说。
显示好了之后你怎么解决回复的问题呢?先来分析正常情况下回有哪些可能:首先通过点击回复内容中的用户名,通过焦点事件调到特定的input标签中。预想是这样的,但是实际上只会跳到第一个。具体为什么我就不多说了,直接将解决的代码和方法写出来。那就是通过特定的评论id来动态生成动态的JavaScript的方法。这样就可以解决了。
jsp页面和JavaScript代码:

<div class="box-body">
          <p class="m-a-0"><form action="/Web_Community/AskServlet?cmd=comment" method="post">
<input type="hidden" name="ask_id" value="${al.a_id }">
<input type="hidden" name="uid" value="${user.u_id }">
<div class="input-group">
          <input type="text" class="form-control" style="border-color: lightblue; border: 2px soild lightblue"  name="content" placeholder="说点什么吧">
          <span class="input-group-btn">
            <button class="btn light-blue" type="submit">评论</button>
          </span>
        </div>
</form>
<c:forEach items="${commlist}" var="commlist">
<div style="border: 1px solid rgb(240,240,240); margin-top: 10px">
	<%-- <c:if test="${commlist.c_Id==commlist.comment_comment_id && rel.comment_reply_pid == 0} "> 
	 --%><div class="box-header">
          <h3>${commlist.c_name }</h3>
          <small>发布于:${commlist.c_create_time}</small> 
        </div>
         <div class="box-body">
          <p class="m-a-0">${commlist.c_content}</p>
          <a onclick="ck('${commlist.c_name }')">评论</a>
        </div>
       <%--  </c:if>  --%>
           <!--  回复-->
              <div class="box-color text-color pos-rlt" id="rdiv" style="width:98%;margin:auto; display: block;">
                <span class="arrow top pull-left b-blue"></span>
                <div class="box-body" style="border:1px solid rgb(33,150,243)">
                 <c:forEach items="${lr}" var="rel">
		<c:if test="${rel.comment_comment_id ==commlist.c_Id}">
		<div onclick="getUpid${commlist.c_Id}(${rel.ar_id },'${rel.reply_users_name}',${commlist.c_Id})">
			<tr>
				<td>${rel.ar_id }</td>
				<td>${rel.reply_users_name}</td>
				<td>${rel.ar_content }</td>
				<td>${rel.ar_reply_time}</td>
			</tr>
			</div>
		</c:if>
	</c:forEach>
	<form  action="/Web_Community/AskServlet?cmd=reply" id="${commlist.c_Id}" method="post">
		<input type="hidden" name="ask_id" value="${al.a_id }">
		<input type="hidden" name="reply_id" id="repid${commlist.c_Id}" value="">
		<input type="hidden" name="uid" value="${user.u_id }">
		<input type="hidden" name="aid" value="${al.a_id }">
		<input type="hidden" name="comment_id" value="${commlist.c_Id}">
		<input type="hidden" name="reply_user_id" value="${user.u_id }">
		<input name="content" id="contents${commlist.c_Id}" placeholder="说点什么吧"> 
		<input type="hidden" id="uname${commlist.c_Id}" name="uname" > 
		<input  type="submit" id="sub${commlist.c_Id}" value="回复">
	</form>
                </div>
              </div>
        </div>
        <script type="text/javascript">
		function ck(cname){
			var rdiv=document.getElementById("rdiv");
			var contentinput=document.getElementById("contents");
			var u_name=document.getElementById("uname");
			contentinput.placeholder="回复"+cname;
			u_name.value=cname;
			rdiv.style.display="block";
		}
		function getUpid${commlist.c_Id}(rid,name,forms){
			var url="/Web_Community/AskServlet?cmd=replycomment";
			var contentinput=document.getElementById("contents${commlist.c_Id}");
			var actio=forms;
			var u_name=document.getElementById("uname${commlist.c_Id}");
			var sub=document.getElementById("sub${commlist.c_Id}");
			var repid=document.getElementById("repid${commlist.c_Id}");
			contentinput.placeholder="回复"+name;
			repid.value=rid;
			actio.action=url;
			//alert(contentinput.placeholder);
			sub.value="回复";
			u_name.value=name;
			contentinput.focus();
		}
	</script>
</c:forEach>

到这里就完成了,如果有不解可以联系 我或者有更好的 方法可以分享一下哦,开发中偶然发现,并无抄袭任何人。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_41134977

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值