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