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

  • 相关阅读:
    第一周例行报告
    内置函数_map、filter
    时间戳
    模块_pip、os模块
    常用内置函数
    函数递归、列表推导式
    Python基础(六)_全局变量声明、可变参数、关键字参数
    Python基础(五) 函数
    python基础(四)集合
    Python基础(三)文件操作
  • 原文地址:https://www.cnblogs.com/ourLifes/p/9561819.html
Copyright © 2011-2022 走看看