Show/Hide 密码表单JS

Question

我正在使用 Fluent Forms 并找到了这个片段：


passField.wrap("<div class='ff_input-group'></div>");
passField.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </i></span></div>');

$form.find(".toggle-password").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField.attr("type") == "password") {
        passField.attr("type", "text");
    } else {
        passField.attr("type", "password");
    }
});

它与密码字段完美配合，但我有一个带有 att 名称的确认密码字段：password_1

如果我重复使用这段代码


passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password_1"> </i></span></div>');

$form.find(".toggle-password_1").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField.attr("type") == "password") {
        passField.attr("type", "text");
    } else {
        passField.attr("type", "password");
    }
});

它显示了眼睛图标，但在点击时更改了第一个密码字段，而不是在确认字段中。 Bot 眼睛图标会更改第一个密码字段，但不会更改确认字段。

我做错了什么？

Answer 1

我第一眼看到的是，当您获得 ".toggle-password_1" 时，您仍在更改 passField 中的属性，而不是 passField_1

中的属性

Answer 2

可能是因为你没有使用现有的class，也就是说，你告诉它通过class“.toggle-password_1”搜索元素，也许最正确的做法是为其添加一个ID并通过其ID搜索所述标签。

更正如下：

passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i id=¨confirmPass¨ style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </i></span></div>');

$form.find("#confirmPass").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField_1.attr("type") == "password") {
        passField_1.attr("type", "text");
    } else {
        passField_1.attr("type", "password");
    }
});

Pdt: 对象在函数中调用不正确，正确的引用是“passField_1”

我是 Whosebug 的新手，希望我的回答对您有所帮助:)

Answer 3

你的代码很好，但只是把它放在你用来确认隐藏密码的代码后面，因为它重复发生并得到错误。这两个过程完全相互对立，这没有任何意义，您应该已经意识到它不符合代码并且没有正确获得 class 这也可能是原因。

here is the fixed version that I did which might help you: < the code you used for conformation > and

passField_1.wrap("<div class='ff_input-group'></div>");
passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password_1"> </i></span></div>');
$form.find(".toggle-password_1").click(function() {
    $(this).toggleClass("dashicons-visibility dashicons-hidden");
    if (passField.attr("type") == "password") {
        passField.attr("type", "text");
    } else {
        passField.attr("type", "password");
    }
});

Show/Hide 密码表单JS

Show/Hide password form JS

javascript

forms

passwords

show-hide