来回切换图标以及文字

自己在做项目的时候会经常遇到 来回切换小图标（这里用的图标是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>
 

posted on 2017-08-10 15:32  每天暴走三公里  阅读(899)  评论(0)    收藏  举报

导航