JSP页面中JQ实现---当点击按钮的时候，改变原来样式，内容也发生改变，再次点击变成原来的样子

在网上找了很久，都是一些乱七八糟的代码，不能直接切入主题，所以只有自己亲自写了，废话不多说了，直接上代码

JSP页面代码，关键代码我给各位直接拿出来了，这样便于好看

<div class="fc-asset-title"> 
<span class="fc-follow-button"> + FOLLOW </span>
</div>

Jq代码

<aui:script>
    jQuery( function(){
        var followButton = $(".fc-asset-title .fc-follow-button");  //把获取到的类提取出来，简化代码，传给followButton
        
        followButton.click(function() {
            if (followButton.hasClass("fc-following")) {           //hasClass来判断 followButton中是否有类：fc-following，如果有返回true
                followButton.removeClass("fc-following");       //如果有fc-following类，移除
                followButton.html("+ FOLLOW");                    //内容变成+ FOLLOW
            }
            else {
                followButton.addClass("fc-following");   //如果没有添加fc-following类
                followButton.html("&radic; FOLLOWING"); //内容变成&radic; FOLLOWING
            }
        });
    });
</aui:script>

CSS代码就不上贴了，根据个人习惯，只要写出fc-following类的样式就行

效果图：

没有点击的样子

点击一次的样子

再次点击