jQuery实现点击关注和取消功能
更新时间：2017年07月03日 09:22:41 作者：李大宝
点赞，网络用语，表示“赞同”、“喜爱”。今天小编通过实例代码给大家分享jQuery实现点击关注和取消功能，需要的朋友参考下吧
点赞，网络用语，表示“赞同”、“喜爱”。
该网络语来源于网络社区的“赞”功能。送出和收获的赞的多少、赞的给予偏好等，在某种程度能反映出你是怎样的人以及处于何种状态。点赞的背后，反映出你自己。与之对应的便是取消功能。恰巧最近博主在一款APP，其中一个版块需要实现点赞和取消功能，经过思考决定用JQuery代码实现它，好了废话不多说，上干货！！
首先要引入JQuery插件
其次，我们需要定义一个div，并给它一些样式
然后就是JS代码了，如下所示
$(document).ready(function(){
var onOff=true;
var div=$(".div");
div.click(function(){
if (div.onOff) {
div.val("关注我");
div.css({"background":'#ccc'});
div.onOff = false;
} else {
div.css({"background":'red'});
div.val("已关注");
div.onOff = true;
}
});
});
实现效果如下
可见JS代码是好用的，同样的，也可以实现图片切换效果如下图
其实现代码如下
html:
<div class="div"></div>
css:注意图片路径
.div{
background-image: url(img/guanzhu.png);
width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;
}
JS代码
$(document).ready(function(){
var onOff=true;
var div=$(".div");
div.click(function(){
if (div.onOff) {
div.css({"background-image":'url(img/guanzhu.png)'});
div.onOff = false;
} else {
div.css({"background-image":'url(img/yiguanzhu.png)'});
div.onOff = true;
}
});
});
以上所述是小编给大家介绍的jQuery实现点击关注和取消功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了jQuery实现表单验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
下面小编就为大家带来一篇JQuery实现DIV其他动画效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
我们平时在开发web程序的时候，想把一个新闻源滚动显示新闻的条目的标题及内容摘要，而且是每次一条，有点类似csdn的滚动广告。2009-10-10
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码 ，比页面刷新更好，用户体验更好，需要的朋友可以参考下。2010-09-09
这篇文章主要介绍了json格式的javascript对象用法,结合实例形式总结分析了javascript针对json格式数据操作的常见技巧,需要的朋友可以参考下2016-07-07
如何想让页面上两个div中的滚动条(滑块)同步运动该怎实现，具体代码如下，感兴趣的朋友可以参考下2013-08-08
这篇文章主要为大家详细介绍了jquery插件实现图片对比，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
jquery改变了程序员写javascript的方式。作为jquery的爱好者和新手，最近我学会了用寥寥几句jquery代码实现类似tabs插件的功能，相信此文能为许多刚入门的jquery爱好者和想实现tabs插件功能的朋友带来一些帮助。2011-03-03
本文给大家分享一段jquery代码实现手指滑动轮播效果，代码简单易懂，非常不错，需要的朋友参考下2016-12-12
这篇文章主要为大家详细介绍了jquery ztree实现模糊搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论