如何将精彩回帖置顶--实现"亮了的回帖"

来源：互联网发布：unity3d开发的游戏案例编辑：程序博客网时间：2024/04/30 05:25

有些网站，可以将评论中的精彩回帖置顶，可以很好的让浏览者看到。

例如下面虎扑网的：亮了的回帖.

http://nba.hupu.com/news/201204/77764.html

有了jQuery后，一切都好办了。jQuery的clone()可以很好的实现这个。

代码如下：

后台取数据这些代码就不贴了，只贴前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LiangLe._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>亮了的回帖</title>    <script src="Js/jquery-1.7.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(document).ready(function() {        //用AJAX加载评论列表            $.ajax({                type: "GET",                url: "Handler/BBShandler.ashx",                data: "action=GetList",                contentType: "charset=utf-8",                cache: false,                success: function(data) {                    $("#List").empty();                    $("#List").html(data);                    $("#List").show();                    GetLiangLe();                },                error: function(XMLHttpRequest, textStatus, errorThrown) {                    alert("获取标签数据失败，请检查网络后重试");                }            });        });                //提交回帖内容，并显示        function btnOK() {            $.ajax({                type: "GET",                url: "Handler/BBShandler.ashx",                data: "action=respone&author=" + encodeURIComponent($("#author").val()) + "&content=" + encodeURIComponent($("#content").val()) + "&liangLe=0&createTime=2012/04/06",                contentType: "charset=utf-8",                cache: false,                success: function(data) {                    $("#List").empty();                    $("#List").html(data);                    $("#List").show();                    $("#content").empty();                },                error: function(XMLHttpRequest, textStatus, errorThrown) {                    alert("获取标签数据失败，请检查网络后重试");                }            });        }        function AddLiangle(obj) {            //点击后亮了数加1            var num =parseInt($(obj).html()) + 1;            var id = $(obj).attr("id").substr(5);            $.ajax({                type: "GET",                url: "Handler/BBShandler.ashx",                data: "action=addLiangle&id=" + id + "&liangLe=" + num,                contentType: "charset=utf-8",                cache: false,                success: function(data) {                    if (data == "success") {                        $(obj).html(num);                        if (num >= 5) {                            if ($("#Liang").find("#"+$(obj).attr("id")).length < 1) {                                $(obj).parent().parent().clone().prependTo($("#Liang"));                            }                        }                    }                    else {                        alert("faild")                    }                },                error: function(XMLHttpRequest, textStatus, errorThrown) {                    alert("获取标签数据失败，请检查网络后重试");                }            });            return false;        }        function GetLiangLe() {            $("#Liang").empty();            $(".liangle").each(function() {            //判断，将亮了数大于5的回帖内容复制到Liang标签中            if ($(this).find("a").html() >= 5) {                $(this).parent().clone().prependTo($("#Liang"));                }            });        }    </script>    <style type="text/css">    .item    {     width:100%;     border:solid 1px red;    }    .author    {      float:left;      width:20%;    }    .liangle    {      float:left;      width:80%;    }    .content    {     clear:both;     width:100%;    }    #Liang    {     width:100%;     clear:both;    }    </style></head><body>    <form id="form1" runat="server">    <hr />    <div style="border:solid 1px blue">    <div>亮了的回帖</div>   <%--Liang 用于放置 亮了的回帖--%>    <div id="Liang">    </div>    </div>    <br />    <br />    <div id="List">        </div>    <hr />    <div>用户名:</div><input type="text" id="author" />    <textarea id="content" style="width:80%">    </textarea>    <div style=" text-align:center">    <input type="button" value="回复" onclick="btnOK()" />    </div>    </form></body></html>