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

发布网友发布时间：2022-04-23 06:46

共14个回答

热心网友时间：2022-04-22 19:01

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

我们现在用代码来讲解：

//假设该按钮有个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里面的代码，按钮就变成了关注。

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

热心网友时间：2022-04-22 20:19

jquey中，改变标签内容用 :对象.html();
点击改变当前元素的内容：
$("#元素id").click(function(){
$(this).html("取消关注");
});

热心网友时间：2022-04-22 21:54

$(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("关注");
}
});
}

热心网友时间：2022-04-22 23:45

<div id="clickMe">关注</div>

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

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

热心网友时间：2022-04-23 01:53

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>

代码可以直接运行

热心网友时间：2022-04-23 04:18

通过toggle的方法来切换想要的内容。http://www.w3school.com.cn/jquery/event_toggle.asp

热心网友时间：2022-04-23 06:59

方法有很多种
可以创建两个div
点击这个关注后，隐藏 ‘关注 ’所在的div，显示‘取消关注’ div
同理
点击这个关注后，隐藏 ‘取消关注 ’所在的div，显示‘关注’ div
事先设置 ‘取消关注’所在div为隐藏
隐藏属性有 hidden 等

热心网友时间：2022-04-23 09:57

document.getElementById("关注的ID").value="取消关注";

document.getElementById("关注的ID").innerHtml="取消关注";

热心网友时间：2022-04-23 13:12

<p id="button">关注</p>
$("#button").click(function(){
$("#button").text("取消关注");
});

热心网友时间：2022-04-23 16:43

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>关注</button>
</body>
</html>
<script src="jQuery1.7.js"></script>
<script type="text/javascript">
var type = true;
$('button').click(function(){
if(type){
$(this).text('不关注');
}else{
$(this).text('关注')
}
type = !type;
})
</script>

热心网友时间：2022-04-23 20:31

$('#box').click(function(){
var $text = $(this).text();

$(this).text( $text == '关注' ? '取消关注' : '关注' );
})

热心网友时间：2022-04-24 00:36

$("#aa").toggle(function(){
$(this).text("取消关注");
},function(){
$(this).text("关注");
});

<a id="aa">关注</a>

热心网友时间：2022-04-24 04:57

<div id="hello">关注</div>

$("#hello").click(function(){
$(this).text("取消关注")
});

热心网友时间：2022-04-24 09:35

var box = document.getElementById("box");
box.onclick = function(){
this.innerText = this.innerText=="关注"?"取消":"关注";
}

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

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