做移动开发的时候经常会遇到点赞的一些处理，尤其是当使用字体图标的时候，由于仅希望改变字体，但是字体经过编译之后又和它的. html()不一致，所以导致判断起来比较麻烦，最后想了一个办法来解决此问题。

还有一种点赞是点赞之后后面跟有数字，点击之后颜色变化并且数字1,当再次点击的时候，颜色改变并且数字-1。

以下是我写的一个小例子来简单实现。

效果图如下：

超文本标记语言代码：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 '标题点赞/title meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=no ' meta http-equiv=' x-ua-compatible ' content=' ie=edge，chrome=1'link rel='样式表type=' text/CSS ' href=' CSS/style。CSS ' script src=' http 3360 js/zepto。js/script script src=' http 3360 js/jsid='node'/a/p p I class=' icon font icon'/i/p p I class=' icon font icon'/i/p/div class=' method 2 ' p I class=' icon font icon'/ispan50/span/p p I class=' icon font icon'/ispan60/span/p p I class=' icon font icon'/ispan80/span/p/div脚本src=' http : js/jss。js '/脚本/正文/html CSS代码：

@ font-face { font-family : ' icon font '；src : URL('图标字体。eot’)；/* IE9 */src : URL('图标字体。eot？#iefix ')格式(' embedded-opentype ')，/* IE6-IE8 */url('iconfont.woff ')格式(' woff ')，/* chrome，firefox */url('iconfont.ttf ')格式(' truetype ')，/* chrome、火狐、opera、Safari、安卓、iOS 4.2 */URL('图标字体。SVG #图标字体')格式(' SVG ')；/* iOS 4.1- */} .图标字体{ font-family : '图标字体！重要；font-size :16 px字体样式：正常；-网络套件-字体-流畅：抗锯齿；-web套件-文本-笔画-宽度： 0.2 px-moz-OSX-字体-平滑：灰度；} * { margin : 0；padd : 0；} .method1 { color: green}。方法1。方法2p { padding-left : 20px；页边距-top : 10px；}.图标cursor:指针；font-size : 30px} .method2 { color: # 000}。方法2 span { font-size : 30px}js代码：

var str=$('#node ').html()；$(.方法1’).on('tap '，' I '，function(){ var html=$(this).html()；if(html==str){ $(this).html('')；}else{ $(this).html('')；}});$(.方法2’).on('tap '，' p '，function(){ var color=$(this).查找(“我”).CSS('颜色')；var number=$(this).查找(' span ').html()；if(color=='rgb(0，0，0)'){ $(this).查找(“我”).css('color '，' # f00 ')；$(这个)。查找(' span ').html(数字* 1 1);}else if(color=='rgb(255，0，0)'){ $(this).查找(“我”).css('color '，' # 000 ')；$(这个)。查找(' span ').html(数字* 1-1);}})至于字体图标可以去阿里矢量图库进行下载；

如果需要完整的代码可以到此处下载：js实现手动点赞效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。