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