1. 程式人生 > >JQuery實現選擇特定樓層回復

JQuery實現選擇特定樓層回復

onclick 功能 sso contain data- avr title method ade

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實現選擇特定樓層回復