#### **这里主要是实现图片和字体图标的切换，通过点击实现切换。** 图片切换 html 代码 ~~~ <div class="use"> <img src="img/no.png" class="changimg"> </div> ~~~ 图片切换 js 代码 ~~~ var toggle = true; $(".changimg").on("touchend", function(){ if(toggle){ $(this).attr("src", "img/yes.png"); toggle = false; $("#paotui-pay").slideToggle(300); }else { $(this).attr("src", "img/no.png"); $("#paotui-pay input[type='text']").val(""); toggle = true; $("#paotui-pay").slideToggle(300); } }) ~~~ 字体图标切换的 HTML代码 ~~~ <div class="top-right"> <i class="icon iconfont icon-shoucang-moren"></i> <span>收藏</span> </div> ~~~ css代码 ~~~ .top-right { float: right; width: 10%; height: 40px; margin-top: -40px; } .top-right i.iconfont { display: block; margin-top: 1px; text-align: center; font-size: 20px; color: #fff; } .top-right i.challageColor { display: block; margin-top: 1px; text-align: center; font-size: 20px; color: red; } ~~~ js代码 ~~~ $(".top-right i").on("touchend", function(){ if($(this).hasClass("challageColor")){ $(this).removeClass("challageColor"); alert("取消收藏成功！") }else{ $(this).addClass("challageColor"); alert("收藏成功！") } }) ~~~