jquery密码框切文本框

.eye {

    margin-top: -35px;

    margin-left: 400px;

}

.changeState{

    background: url(../img/closeeyes.png) left center no-repeat;

    background-size: 4vh;

    padding-left: 5vh;

}

.StopState{

    background: url(../img/openeyes.png) left center no-repeat;

    background-size: 4vh;

    padding-left: 5vh;

}

------------------------------------------------------------------------------------------------------------------------------------------

<input type="password" placeholder="请输入密码" class="inp" maxlength="30">

  <div class="eye">

      <span class="changeState"></span>

  </div>

------------------------------------------------------------------------------------------------------------------------------------------

<script>

    $('.eye').click(function () {

        if ($(this).find("span").hasClass("changeState")) {

            $(this).find("span").removeClass("changeState").addClass("StopState");

        } else {

            $(this).find("span").removeClass("StopState").addClass("changeState");

        }

    });

    var eye = document.querySelector(".eye");

    var inp = document.querySelector(".inp");

    var frag = true;

    eye.addEventListener("click", function () {

        if (frag) {

            inp.setAttribute("type", "text");

            frag = false;

        } else {

            inp.setAttribute("type", "password");

            frag = true;

        }

    })

</script>