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

最新推荐文章于 2023-05-18 11:26:46 发布

highplayer

最新推荐文章于 2023-05-18 11:26:46 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 我开发的小软件文章标签： xmlhttprequest function action div jquery border

本文链接：https://blog.csdn.net/highplayer/article/details/7455104

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

我开发的小软件

6 篇文章 0 订阅

订阅专栏

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

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

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="回复" οnclick="btnOK()" />
    </div>
    </form>
</body>
</html>

highplayer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何将精彩回帖置顶--实现"亮了的回帖"

有些网站，可以将评论中的精彩回帖置顶，可以很好的让浏览者看到。例如下面虎扑网的：亮了的回帖.http://nba.hupu.com/news/201204/77764.html有了jQuery后，一切都好办了。jQuery的clone()可以很好的实现这个。代码如下：后台取数据这些代码就不贴了，只贴前台代码：亮了的回帖
复制链接

扫一扫

专栏目录