JQuery實現選擇特定樓層回複

標籤：func   comm   tracking   後台   label   hid   取字串   view   span   

JQuery實現選擇特定樓層回複

需求：
一個論壇裡面的小功能，除了回複文章之外，也能夠回複文章以下的回複。詳細實現細節：

• 每個回複有一個“回複”按鈕，點擊按鈕實現：
• 在form表單裡面加入一個input元素，內容是須要回複的樓層數，這樣post過去之後才幹在幕後處理；
• 在回複內容的textarea裡面加入文字“回複x樓：”

接下來就是詳細實現了。無疑僅僅能用JS_(:з」∠)_，又是每次到了這時候才暫時各種百度怎麼用…

擷取樓層數

在button上綁定了一個function

<button class="btn btn-primary" onclick="cause_reply(this)">回複</button><p>{{reply.floor_num}}樓 {{reply.author.username}} at {{reply.time}}</p>

最開始我沒有放this在裡面，僅僅是寫了個方法。後來發現這種話不同的樓層結構都是相似的。沒有辦法擷取到樓層數，僅僅能用this確定button的詳細位置，然後從button找到樓層數。
實際上僅僅用了一行，思路是擷取button的兄弟元素p然後截取字串，用原生js的時候一直出問題，nextSibling擷取到的是[object text]，然後這個text的內容又顯示不出來，後來百度了半天可能是firefox的原因，把button後面的換行也作為一個元素，於是就擷取不到內容，最後用jquery攻克了。

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

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">        <label  class="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="回帖"/>    </div></form>

加入文字內容

相同一行解決：

 $("textarea").append("回複"+reply_floor+"樓：");

添加input元素

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

差點兒相同就是這樣。然後另一個就是。假設先點擊過一個樓層的回複，又點擊了另外一個樓層。對應的前一個就要清除掉，改成最後操作的樓層。所以加了一個推斷過程。最後所有代碼是這樣：

function cause_reply(obj){    if($("#reply_id").length>0){        $("#reply_id").remove();        $("textarea").empty();    }    var new_inp=document.createElement("input");    var reply_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_floor+"樓：");}

JQuery實現選擇特定樓層回複