jq用户评论点击回复简单代码。
类似这种镶套回复评论:
- <div>
- <ul>
- <!--一条评论 begin-->
- <li>
- <div class="user-column">
- <div class="user-reply">
- <a class="c-grey2 small" href="javascript:void(0);"><span class="reply-icon reply"></span><span class="to-reply" href="javascript:void(0);">回 复</span> </a>
- <a class="c-grey2 small" href="javascript:void(0);"><span class="reply-icon look-reply"></span><span class="show-reply" href="javascript:void(0);">查看回复(<em>7</em>)</span></a>
- </div>
- <!--span10 begin-->
- <div class="span10">
- <div class="show-comment-box" style="display: none;">
- <div class="deshed-arrow">
- <img src="data:images/solid_arrow.jpg"/>
- </div>
- <div class="comment-pan">
- <textarea name="content" rows="" maxlength="300"></textarea>
- <span class="publish">回 复</span>
- </div>
- </div>
- </div>
- <!--span10 end-->
- <!--span10 begin-->
- <div class="span10">
- <!-- 用户回复 begin-->
- <div class="user-column-reply" style="display: none;">
- <div class="deshed-arrow">
- <img src="data:images/dashed_arrow_up.jpg"/>
- </div>
- <ul class="comment-list">
- <li>
- <div class="user-column">
- <div class="user-reply">
- <a class="c-grey2 small" href=""><span class="reply-icon like"></span>(<em>702</em>)</a>
- <a class="c-grey2 small" href="javascript:void(0);">
- <span class="reply-icon reply"></span>
- <span class="to-reply" href="javascript:void(0);">回 复</span>
- </a>
- </div>
- <!--span10 begin-->
- <div class="span10">
- <div class="show-comment-box" style="display: none;">
- <div class="comment-pan">
- <textarea name="content" rows="" maxlength="300"></textarea>
- <span class="publish">回 复</span>
- </div>
- </div>
- </div>
- <!--span10 end-->
- </li>
- </ul>
- </div>
- <!--用户回复 end-->
- </li>
- <!--一条评论 end-->
</ul>
</div>
JQ代码:
- <script type="text/javascript">
- //点击回复
- $(".show-reply").click(function() {//点击回复
- var $i = $(this);
- if ($i.text() != "收起回复") {
- $i.data("text", $i.text());
- $i.text("收起回复");
- } else $i.text($i.data("text"));
- $i.closest(".user-column").find(".user-column-reply").toggle();
- })
- $(".to-reply").click(function() {//点击回复
- var $i = $(this);
- if ($i.text() != "暂不回复") {
- $i.data("text", $i.text());
- $i.text("暂不回复");
- } else $i.text($i.data("text"));
- $i.closest(".user-reply").next().find(".show-comment-box").toggle();
- })
- </script>
jq用户评论点击回复简单代码。的更多相关文章
- C#截取用户的点击事件的代码
在代码过程中中,把做工程过程中常用的代码备份一下,如下代码内容是关于C#截取用户的点击事件的代码,应该是对大家也有好处. private void SomeControl_KeyDown(object ...
- iOS之防止用户重复点击Button(按钮)问题
在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...
- js实现点击评论进行显示回复框
有人在群里问如何在留言评论那里点击回复按钮,下面就自动显示一个回复框,他想要的效果如图: 于是我随意的写了一段HTML,代码如下: <!DOCTYPE HTML> <html lan ...
- 模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么作为初学者,要模仿这些功能有点复杂的,最起码表的关系得弄清楚~~ 先把思路理一下: (1)用户登录,用session读取 ...
- python 全栈开发,Day82(点赞和踩灭,用户评论)
一.点赞和踩灭 样式 先来做样式,修改article_detail.html,增加div_digg的div {% extends "base.html" %} {% block c ...
- Nodejs之MEAN栈开发(九)---- 用户评论的增加/删除/修改
由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...
- Node.js实现用户评论社区(体验前后端开发的乐趣)
前面 接着上一节的内容来,今天我们要完成一个用Node开发后台服务器,实现一个简单的用户评论社区.可以先看下效果图: 开始 建立项目文件夹comment-list,在里面新建一个public文件夹,p ...
- Redis:安装、配置、操作和简单代码实例(C语言Client端)
Redis:安装.配置.操作和简单代码实例(C语言Client端) - hj19870806的专栏 - 博客频道 - CSDN.NET Redis:安装.配置.操作和简单代码实例(C语言Client端 ...
- 查找和定位Android应用的按钮点击事件的代码位置基于Xposed Hook实现
本文博客地址:https://blog.csdn.net/QQ1084283172/article/details/80956455 在进行Android程序的逆向分析的时候,经常需要通过Androi ...
随机推荐
- uCOS-II之移植20160823
首先我们看一下uC/OS-II的框架图: 1.配置文件修改 +------------------------------------------ |core: os_core.c | os: os ...
- 图像灰度化方法总结及其VC实现
http://blog.csdn.net/likezhaobin/article/details/6915754 最近一段时间作者开始进行运动目标识别定位系统设计,本文以及后续的几篇文章都是从一个图像 ...
- Codeforces Round #306 (Div. 2)A B C D 暴力 位/暴力 暴力 构造
A. Two Substrings time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- Codeforces Round #358 (Div. 2) A B C 水 水 dfs序+dp
A. Alyona and Numbers time limit per test 1 second memory limit per test 256 megabytes input standar ...
- Codeforces 25.E Test
E. Test time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...
- 洛谷P1588 丢失的牛
P1588 丢失的牛 158通过 654提交 题目提供者JOHNKRAM 标签USACO 难度普及/提高- 时空限制1s / 128MB 提交 讨论 题解 最新讨论更多讨论 答案下载下来是对的,但 ...
- Leetcode 832.翻转图像
1.题目描述 给定一个二进制矩阵 A,我们想先水平翻转图像,然后反转图像并返回结果. 水平翻转图片就是将图片的每一行都进行翻转,即逆序.例如,水平翻转 [1, 1, 0] 的结果是 [0, 1, 1] ...
- 「Linux」centos7安装mysql
1.yum仓库下载MySQL:sudo yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch. ...
- 前端PHP入门-029-文件操作-掌握级别
人生只有三天,活在昨天的人迷惑:活在明天的人等待:活在今天的人最踏实.你永远无法预测意外和明天哪个来得更早,所以,我们能做的,就是尽最大的努力过好今天.请记住:今天永远是昨天死去的人所期待的明天. f ...
- turn服务部署
centos7.2 git clone https://github.com/coturn/coturnyum -y install openssl-develyum install openssl ...