在Chrome中显示隐藏密码，但在Firefox中不显示

Question

我是jquery的新手。该脚本在chrome中可以正常工作。但是，在Firefox中打开时，它根本无法工作。谁能帮我。对不起，我的英语不好。这是我的第一个问题。

这是我的html和CSS：

<div class="form-group" id="show_hide_password">
  <input class="form-control" type="password" name="password" placeholder="PASSWORD" maxlength="15" autocomplete="off">
  <a href="#"><i class="fa fa-eye-slash" style="float: right; margin-top: -29px; margin-right: 10px; color: #fff;"></i></a>
</div>

这是我的jquery脚本：

$(document).ready(function() {
  $("#show_hide_password a").on('click', function(event) {
    event.preventDefault();
    if($('#show_hide_password input').attr("type") == "text"){
      $('#show_hide_password input').attr('type', 'password');
      $('#show_hide_password i').addClass( "fa-eye-slash" );
      $('#show_hide_password i').removeClass( "fa-eye" );
    }else if($('#show_hide_password input').attr("type") == "password"){
      $('#show_hide_password input').attr('type', 'text');
      $('#show_hide_password i').removeClass( "fa-eye-slash" );
      $('#show_hide_password i').addClass( "fa-eye" );
    }
  });
});