艺博会（密码小眼睛点击显示隐藏）

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