jquery implementation Select a specific floor reply

jquery implementation Select a specific floor reply

Demand:
A small function in a forum, in addition to reply to the post, you can also reply to the following post replies. Detailed implementation Details:

• Each reply has a "Reply" button, click the button implementation:
• Add an INPUT element to the form form, and the content is the number of floors that need to be restored, so post has the ability to process in the background;
• Add the words "Reply to the X floor" in the textarea of the reply content:

The next step is to implement it in detail. Undoubtedly can only use Js_ (: З"∠) _, but each time to this time only temporarily various Baidu how to use ...

Get the number of floors

A function is bound on the button.

<button  class  = "btn Btn-primary " onclick  =" cause_reply (this) " ;  reply </button ;  <p ;   {{reply.floor  _num }}   Lou  {{ Reply.author.username }}   at  {{reply.time }}  </ p ;    

At the very beginning I didn't put this in it, just wrote a method. It was later found that the different floor structures were similar. There is no way to get to the number of floors, just use this to determine the detail position of the button, and then find the number of floors from the button.
In fact, just a line, the idea is to get the button's brother element P and then intercept the string , with the original JS has been a problem, nextsibling get is [object text], Then the text of the content is not shown, and then Baidu has a half-day may be the reason for Firefox, the button behind the line is also as an element , so they can not get the content, finally with jquery conquered.

var reply_floor=$(obj).next().text().substr(0,1);

Structure of the form:

<form class="form-horizontal panel col-md-10 col-md-offset-1 Container" method ="POST" action="/forum/post/">{% csrf_token %}    <div class="Form-group col-md-12">        <labelclass="Control-label" for ="Examplecontent " >  </label>        <br/><br/>        <textarea rows="6" name="Content" class=" Form-control " id=" examplecontent " placeholder=""></textarea>    </div>    <div class="Form-group col-md-4" id="Post_field">        <input type="hidden" name="Post_type" value= "post_reply"/>        <input type="hidden" name="post_id" value ="{{post.id}}  "/><input type=" Submit " class=" Btn btn-lg Btn-primary " value=" Reply "/></div></form >             

Add text content

The same line resolves:

$("textarea").append("回复"+reply_floor+"楼：");

Add INPUT Element

var new_inp=document.createElement("input");new_inp.setAttribute("type""hidden");new_inp.setAttribute("id""reply_id");new_inp.setAttribute("name""reply_id");new_inp.setAttribute("value", reply_floor);$(‘#post_field‘).append(new_inp);

Almost the same is true. And then the other is. Let's say you clicked on a reply to a floor and clicked on another floor. The corresponding previous one will be removed and changed to the last operating floor. So an inference process was added. Finally all the code is this:

 function cause_reply(obj){    if($("#reply_id") .length>0){        $("#reply_id"). Remove (); $("TEXTAREA"). empty (); }varNew_inp=document.createelement ("Input");varreply_floor=$ (obj). Next (). Text (). substr (0,1); New_inp.setattribute ("Type","Hidden"); New_inp.setattribute ("id","reply_id"); New_inp.setattribute ("Name","reply_id"); New_inp.setattribute ("Value", Reply_floor); $(' #post_field '). append (NEW_INP); $("TEXTAREA"). Append ("Reply"+reply_floor+"Building:");}

jquery implementation Select a specific floor reply