jquery点击改变文字 比如点击 关注 后变成 取消关注 10

求大神谢谢... 求大神 谢谢 展开
 我来答
stlwdybb
2017-08-16 · TA获得超过329个赞
知道小有建树答主
回答量:269
采纳率:71%
帮助的人:73.4万
展开全部

先说一下思路吧:首先你需要绑定一个点击事件在按钮上,然后我们可以通过一个布尔型变量来记录状态,假设这个变量为假的时候,我们就显示取消关注,为真的时候就显示关注。当然你也可以,当变量为真的时候显示取消关注,假的时候显示取消关注。

我们现在用代码来讲解:

//假设该按钮有个id名为test,现在我们为它绑定一个事件
var v = false;//定义一个布尔型变量,来判断显示关注或取消关注
$( "#test" ).click( function() {//给按钮绑定点击事件
    if( v ) {    //如果为真的时候,我这里就显示关注
        $( this ).html( "关注" );
        v = false; //由于文字已更改,所以我们要改变变量的值
    } else {
        $( this ).html( "取消关注" );
        v = true;
    }
} );

解释一下运行过程,便于理解。

当程序第一次运行的时候,默认显示的是关注。所以在点击按钮后,会执行function里的代码。首先会判断v的值,这时v=false,所以会执行else里面的代码,按钮变成了取消关注,v=true。再次点击按钮,同上首先判断v的值,这时v=true,所以会执行if里面的代码,按钮就变成了关注。

到此就完成了点击文字的转换

杭州黑马训练营
2017-08-04 · 超过49用户采纳过TA的回答
知道小有建树答主
回答量:110
采纳率:50%
帮助的人:59.8万
展开全部
jquey中,改变标签内容用 :对象.html();
点击改变当前元素的内容:
$("#元素id").click(function(){
$(this).html("取消关注");
});
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友42c6392
2017-07-19 · 超过24用户采纳过TA的回答
知道答主
回答量:46
采纳率:71%
帮助的人:10.8万
展开全部
$(document).ready(function(){
$("#id").onclick(function(){
//是文字类型显示的话
var text=$(this).html();
//是按钮类型显示的话
var val=$(this).val();
if(text=="关注" 或者 val=="关注"){
$(this).html("取消关注");
//或者
$(this).val("取消关注");
}else{
$(this).html("关注");
//或者
$(this).val("关注");
}
});
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
原来你是这薯片
2017-08-24 · TA获得超过206个赞
知道小有建树答主
回答量:124
采纳率:50%
帮助的人:97.7万
展开全部
<div id="clickMe">关注</div>

$(function(){
  $("#clickMe").on("click",function(){
    $("#clickMe").text("取消关注")
  })
})
要引入jQuery

思路是这样的,但是在项目中点击的时候要去ajax请求,数据请求成功之后根据返回的数据判断是显示关注还是取消关注

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
流浪的小草0
2017-10-07 · 超过31用户采纳过TA的回答
知道答主
回答量:52
采纳率:0%
帮助的人:55.1万
展开全部

jquery代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery点击改变文字</title>
</head>
<body>
  <div class="follow">关注</div>
</body>
<script type="text/javascript" src="

<script>
    $(document).ready(function(){
        $(".follow").toggle(function(){
            $(".follow").html("取消关注");
        },function(){
            $(".follow").html("关注");
        });
    })
</script>
</html>

代码可以直接运行

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(12)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式