我在输入字段的“内部”有一个图标。 当我悬停时,我希望更改图标以及它所在的输入字段的“类型”(我有 3 个这样的字段,所以我想选择这个特定的字段)
HTML:
<div class="change_subtitle">Enter Password</div>
<input id="pw_old" class="change_input" type="text"><i class="fa fa-eye-slash" aria-hidden="true"></i></input>
<div class="change_subtitle">Enter new Password</div>
<input id="pw_new1" class="change_input" type="password"><i class="fa fa-eye-slash" aria-hidden="true"></i></input>
<div class="change_subtitle">Confirm new Password</div>
<input id="pw_new2" class="change_input" type="password"><i class="fa fa-eye-slash" aria-hidden="true"></i></input>
<div class="button_confirm" onclick="inputIsValid()">Confirm</div>
jQuery:
$(".fa-eye-slash").hover(function(){
if($(this).hasClass('fa-eye-slash')) {
$(this).removeClass('fa-eye-slash');
$(this).addClass('fa-eye');
$(this).attr('type' = 'text'); // I want to select the input here and change the type of it
} else if($(this).hasClass('fa-eye')) {
$(this).removeClass('fa-eye');
$(this).addClass('fa-eye-slash');
$(this).attr('type' = 'password'); // I want to select the input here and change the type of it back
}
})
CSS(只是为了理解“内部”指的是什么):
.fa-eye-slash{
color: #34495e;
margin-left: -20px;
}
.fa-eye{
color: #34495e;
margin-left: -20px;
}
因此,当我将鼠标悬停在图标上时,它应该会发生变化,并将输入字段的类型从 "password"
更改为 "text"
,然后再更改回来。
最佳答案
试试这个 fiddle 路径 https://jsfiddle.net/afckhbpo/
问题出在
$(this).attr('type' = 'text')
像这样使用:
$(this).prev().attr('type', 'text')
关于jquery - 我如何选择最近的 <input>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43201045/