jquery点击来回切换

  做个笔记偶尔用有时记不住

方法一:

<div id="test">
    test
</div>

 $('#test').mouseover(function () {
        $(this).addClass('a')
  }).mouseout(function () {
       $(this).removeClass('a')
  })

方法二:

<div class="people_state">设为管理员</div>

<div class="people_state">设为管理员</div>

<js>

$(".people_state").each(function() {

      $(".people_state").bind("click");

      $(".people_state").toggle(function() {

      $(this).html("取消管理员");

      },function() {

     $(this).html("设为管理员");

 })

});

方法三:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
height: 600px;
width: 300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<title>Title</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">
sakdas
</div>
</body>
<script>
$('#d').mouseover(function () {
// 俩个状态来回切换
$(this).toggleClass('a')
}).mouseout(function () {
$(this).toggleClass('a')
})
</script>
</html>

方法四:

<html>

<div class="people_state"    res="0">设为管理员</div>

 

<div class="people_state"    res="0">设为管理员</div>

<js>

$(".people_state").click(function() {

    var  i=$(this).attr("res");

    if(i==0){

           $(this).attr("res","1");

           $(this).html("");

           $(this).html("取消管理员");

    }else{

          $(this).attr("res","0");

          $(this).html("");

          $(this).html("设为管理员");

    }

});

猜你喜欢

转载自www.cnblogs.com/zzguan/p/11506490.html