Tạo chức năng comment với jquery

Trong bài viết này tôi sẽ hướng dẫn bạn tạo chức năng thêm sửa xóa like comment  với jquery như hình sau :


                                                            
Chúng ta bắt đầu với đoạn mã HTML sau : 
Code:

1 2 3 4 5 6 7 8

<div id="top">   <textarea placeholder="Chia sẻ cảm nghĩ của bạn..."></textarea>   <button>Bình luận</button>   <p id="enter">Nhấn Enter để bình luận</p>  </div>  <div id="list">      </div>

CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

#top{    width: 500px;    margin: auto;    border: 1px solid #DFDFDF;    background: #EBEBEB;    border-radius: 5px;    height: 140px;   }   textarea{    width: 440px;    height: 80px;    margin-left: 50px;    margin-top: 8px;    border: 1px solid #DFDFDF;    text-indent: 10px;    line-height: 25px;   }   #enter{    padding-left: 50px;   }   button{    float: right;    margin-top: 15px;    margin-right: 8px;   }   #list{    width: 500px;    margin: 0px auto;   }

Làm việc với jquery để thêm và hoàn thiện các chức năng: 
Thêm :
Khi tôi nhập hoàn thiện bài viết của mình và nhấn enter thì bài viết sẽ được thêm vào thẻ div có id="top".
 Dùng hàm keyup() để xử lý sự kiện khi tôi nhấn phím enter trong thẻ texarea:
  Code:              

1	$("textarea").keyup(function(e) {}

Kiểm tra xem đã nhấn enter hay chưa: 
Code:

1	e.keyCode == 13

Lấy ra giá trị chúng ta vừa nhập trong ô text :
Code:

1	$(this).val();

Thêm vào thẻ div có id="list".
Code:

1	$("#list").append();

 Và đồng thời gán giá trị vlalue của thẻ textarea là rỗng :
Code:

1	$(this).val("");

Như vậy ta đã hoàn thành chức năng thêm và bổ xung các phím chức năng thích , sửa , xóa và dùng hàm css để trình bày nội dung như sau : 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var i = 1;    $("textarea").keyup(function(e) {     if (e.keyCode == 13) {      var html = $(this).val();      var newHTML = "<div class='list_"+i+"'><p class='html_"+i+"'>"+html+"</p><a href='#' class='remove' number='"+i+"'>Xóa</a><a href='#' class='edit' thutu='"+i+"'>Sửa</a><div class='like'><a href='#' class='wlike'>Like</a></div></div>"      $("#list").append(newHTML);      $(".list_"+i).css({       "min-height": "60px",       "background": "#EBEBEB",       "line-height": "30px",       "padding-left": "50px",      })      $(this).val("");      i++;     }   })

Ở trên đoạn code trên tôi đã khai báo biến đếm i , và sau mỗi lần nhấn enter i sẽ tăng thêm 1 giá trị nhằm mục đích phân biệt các class của thẻ chứa các thẻ a sau này khi chúng ta cần gọi đến.
Xóa :
Gọi đến sự kiện click chuột vào thẻ a có class="remove".
Code :

1	$(".remove").live("click",function() {};<br type="_moz">

Dùng hàm attr() và this để lấy ra giá trị của thuộc tính number của thẻ chính thẻ a khi ta vừa click  và gán nó vào một biến c .
Code :

1	var c = $(this).attr("number");

Dùng hàm remove() để xóa đi các thẻ div có class="list_c" chứa thẻ a có giá trị number tương ứng.
Code :

1	$(".list_"+c).remove();

Như vậy tôi đã hoàn thành phím chức năng xóa như sau.
Code :

1 2 3 4

$(".remove").live("click",function() {     var c = $(this).attr("number");     $(".list_"+c).remove(); })

Sửa :
Gọi đến sự kiện khi tôi click vào thẻ a có class="edit".
Code :

1	$(".edit").live("click",function(){}

Dùng hàm attr() và this để lấy ra giá trị của thuộc tính thutu của chính thẻ a khi ta vừa click và gán nó vào 1 biến d.
Code : 

1	var d = $(this).attr("thutu");

Lấy ra đoạn văn bản cần chỉnh sửa của các thẻ p có class=".html_d"  tương ứng với với giá trị của thuộc tính thutu của chính thẻ a khi ta vừa click và gán chúng vào 1 thẻ input để chỉnh sửa đồng thời thay đổi nội dung hiển thị ra của thẻ p bằng hàm html().
Code :

1 2 3

var commnet = $(".html_"+d).html(); var newcomment = "<input type='text' class='input_"+d+"' value='"+commnet+"'/>"; $(".html_"+d).html(newcomment);

Khi tôi đã hoàn thành chỉnh sửa bài viết và nhấn enter thì nội dung của thẻ p sẽ được thay thế bằng giá trị value của thẻ  input.
Code:

1 2 3 4 5 6

$(".input_"+d).live("keyup",function(e){      if(e.keyCode == 13) {       var text = $(this).val();       $(".html_"+d).html(text);      } })

Như vậy tôi đã hoàn thành phím chức năng sửa cho comment.
Code:

1 2 3 4 5 6 7 8 9 10 11 12

$(".edit").live("click",function() {     var d = $(this).attr("thutu");     var commnet = $(".html_"+d).html();     var newcomment = "<input type='text' class='input_"+d+"' value='"+commnet+"'/>";     $(".html_"+d).html(newcomment);     $(".input_"+d).live("keyup",function(e){      if(e.keyCode == 13) {       var text = $(this).val();       $(".html_"+d).html(text);      }     }) })

Like :
Gọi đến sự kiện khi tôi click vào thẻ a có class="wlike".
Code :

1	$(".wlike").live("click",function() {}

Đồng thời khi tôi click vào thẻ a thì sẽ hiện ra 1 dòng thông báo bạn đã thích nội dung này và thay đổi chức năng Like bằng Unlike?
Khi tôi click vào phím Unlike thì phím Like sẽ hiện ra và dòng thông báo sẽ mất đi.
Code : 

1 2 3 4 5 6 7 8 9 10

$(".wlike").live("click",function() {     $(this).html("Unlike?");     $(this).parent().append("<span>Bạn đã thích nội dung này</span>");     $(this).live("click",function() {      var b = "<a href='#' class='wlike'>Like</a>";      $("span").remove();      $(this).parent().append(b);      $(this).remove();     })   })