zoukankan      html  css  js  c++  java
  • 艺博会(密码小眼睛点击显示隐藏)

    <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')
    // }

    第四种:

    //单击切换密码显示或隐藏
    $(".toTextEye").click(function(){
    if($(this).hasClass("toTextEye")== true){
    alert(1)
    $(this).addClass("toPaswEye");
    $(this).removeClass("toTextEye");
    $(this).prev().attr('type','text');
    }else{
    alert(2)
    $(this).removeClass("toPaswEye");
    $(this).addClass("toTextEye");
    $(this).prev().attr('type','password');
    }
    });

  • 相关阅读:
    screen:多重视窗管理程序
    tcpdump、nc网络工具使用
    Linux下查看系统版本号信息的方法
    python列表模拟堆栈和队列
    Linux Service and Security
    day2 列表
    Python常用方法
    Nginx1.6.0+MySQL5.6.19+PHP5.5.14(centos)
    LINUX Mysql5.6.19 安装
    python+django+pycharm 环境配置 (window7)
  • 原文地址:https://www.cnblogs.com/ourLifes/p/9561819.html
Copyright © 2011-2022 走看看