自己在做项目的时候会经常遇到 来回切换小图标（这里用的图标是font-awesome）以及文字的功能，为了方便自己以后用，把它提出来放在一起！
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/> | |
| <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> | |
| <style> | |
| button{ | |
| padding: 5px 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <span> | |
| <i class="fa fa-play" id="playBtn"></i> | |
| </span> | |
| <button class="btn">下载</button> | |
| <script type="text/javascript"> | |
| function toggleBtn(el,classA,classB,type){ | |
| $(el).click(function(){ | |
| var that=$(this); | |
| if(type=="class"){ | |
| if(that.hasClass(classA)){ | |
| that.removeClass(classA).addClass(classB); | |
| }else{ | |
| that.removeClass(classB).addClass(classA); | |
| } | |
| }else{ | |
| if(that.text()==classA){ | |
| that.text(classB); | |
| }else{ | |
| that.text(classA); | |
| } | |
| } | |
| }) | |
| } | |
| toggleBtn('#playBtn','fa fa-play','fa fa-pause','class'); | |
| toggleBtn('.btn','下载','取消'); | |
| </script> | |
| </body> | |
| </html> | |