小编Smu*_*n82的帖子

带有显示/隐藏按钮的多个密码字段

我有几个密码输入,但是想分别通过一个图标(按钮)来切换密码可见性。但是,以下内容将它们全部切换,并将图标仅放置在第一个图标上。

这是一个小提琴:https : //jsfiddle.net/bu6ysgsj/

  
    $(function() {
        $('.password-group').find('.password-box').each(function(index, input) {
            var $input = $(input);
            $('.password-visibility').click(function() {
                var change = "";
                if ($(this).find('i').hasClass('fa-eye')) {
                    $(this).find('i').removeClass('fa-eye')
                    $(this).find('i').addClass('fa-eye-slash')
                    change = "text";
                } else {
                    $(this).find('i').removeClass('fa-eye-slash')
                    $(this).find('i').addClass('fa-eye')
                    change = "password";
                }
                var rep = $("<input type='" + change + "' />")
                    .attr('id', $input.attr('id'))
                    .attr('name', $input.attr('name'))
                    .attr('class', $input.attr('class'))
                    .val($input.val())
                    .insertBefore($input);
                $input.remove();
                $input = rep;
            }).insertAfter($input);
        });
    });
Run Code Online (Sandbox Code Playgroud)
.password-group {
    position: relative;
    width: 300px;
}

.password-group > input {
    width: 100%;
}

.password-visibility {
    position: absolute; …
Run Code Online (Sandbox Code Playgroud)

html jquery

0
推荐指数
1
解决办法
748
查看次数

标签 统计

html ×1

jquery ×1