Question

我在输入字段中有一个“内部”图标。当我悬停时，我希望图标改变，输入字段的“类型”在里面（我有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"，然后再更改。

Answer 1

尝试这个小提琴路径https://jsfiddle.net/afckhbpo/

问题在于

$(this).attr('type' = 'text')

像这样使用：

$(this).prev().attr('type', 'text')

Answer 2

就标题中的问题而言，由于这些图标是紧跟其相关字段的i元素，$(this).prev()将为input提供jQuery对象。

因此，当我悬停图标时，它应该更改并更改输入字段的类型来自＆＃34;密码＆＃34; to＆＃34; text＆＃34;然后回来。

创建input并且有类型后，您无法更改该类型（spec allows it，但有些浏览器[还没有]处理它）。相反，您可以有两个输入（一个type="text"，另一个type="password"），并在适当时显示/隐藏它们。

如何选择最近的<input />？

2 个答案: