艺博会(密码小眼睛点击显示隐藏)

<li class="infoLi">
  <div class="infoText">修改密码</div>
  <input class="store Pasw" type="password" placeholder="请输入最新修改密码" />
  <div class="toTextEye"></div>
</li>

第一种方法:

$(".toTextEye").click(function(){
  $(this).toggleClass("toPaswEye");
  var aa = $(this).prev().attr('type');
  if(aa=="password"){
    $(this).prev().attr('type','text');
  }else{
    $(this).prev().attr('type','password');
  }
});

第二种方法:

//单击切换密码显示或隐藏
$(document).on("click", ".toTextEye" ,function(){

  //$(".toTextEye").on("click", function(){

  $(this).addClass("toPaswEye");
  $(this).prev().attr('type','text');
});
//单击切换密码显示或隐藏
$(document).on("click", ".toPaswEye" ,function(){

  //$(".toPaswEye").on("click", function(){
  //console.log("1111")
  $(this).removeClass("toPaswEye");
  $(this).prev().attr('type','password');
})

$(".toPaswEye").on("click", function(){直接绑定点击事件是不行的 , 因为初始化的时候没有.toPaswEye这个类名。(再看看事件代理的相关知识)

第三种:(没有进行测试)给<div class="toTextEye" ></div>  加个data=“1”

// console.log($(this).attr('data'));
// if (1 == $(this).attr('data')) {
// $(this).addClass("toPaswEye");
// $(this).prev().attr('type','text');
// $(this).attr('data','2')
// } else {
// $(this).removeClass("toPaswEye");
// $(this).prev().attr('type','password');
// $(this).attr('data','1')
// }

猜你喜欢

转载自www.cnblogs.com/ourLifes/p/9561819.html
今日推荐