先说一下思路吧:首先你需要绑定一个点击事件在按钮上,然后我们可以通过一个布尔型变量来记录状态,假设这个变量为假的时候,我们就显示取消关注,为真的时候就显示关注。当然你也可以,当变量为真的时候显示取消关注,假的时候显示取消关注。
我们现在用代码来讲解:
//假设该按钮有个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里面的代码,按钮就变成了关注。
到此就完成了点击文字的转换
jquey中,改变标签内容用 :对象.html();
点击改变当前元素的内容:
$("#元素id").click(function(){
$(this).html("取消关注");
});
$(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("关注");
}
});
}
关注
$(function(){
$("#clickMe").on("click",function(){
$("#clickMe").text("取消关注")
})
})
要引入jQuery
思路是这样的,但是在项目中点击的时候要去ajax请求,数据请求成功之后根据返回的数据判断是显示关注还是取消关注
jquery代码如下:
jquery点击改变文字
关注
代码可以直接运行