javascript - 如何根据密码分数动态更改 Bootstrap 密码强度工具提示颜色

Question

我在我的注册页面上包含了 Bootstrap 的密码“strength-meter”插件，它工作正常。但是，我想对此进行扩展并改变每条消息的颜色(类似于成功、警告和危险警报颜色)。目前，我只将 CSS 编辑为红色。我想弄清楚是否可以动态更改 CSS 元素？

这是页面上从正下方的容器 div 开始到容器 div 末尾的 HTML 部分:

<div class="container">

<?php if (isset($successMessage)) { ?>
    <div class="alert alert-success text-center" role="alert"><strong>Success! </strong><?php echo $successMessage; ?> </div><?php } ?>
<?php if (isset($redirectMessage)) { ?>
    <div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="Redirecting" style="width:100%"><?php echo $redirectMessage; ?> </div></div><?php } ?>
<?php if (isset($failMessage)) { ?>
    <div class="alert alert-danger alert-dismissable fade in text-center" role="alert"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error: </strong> <?php echo $failMessage; ?>
    </div><?php } ?>
<div class="password-fail"></div>
<form id="registration-form" class="form-signin" method="POST">
    <h2 class="form-signin-heading">Register Account</h2>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="text" name="username" class="form-control" placeholder="Username" required>
    </div>
    <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
    <div class="col-lg-16" id="tooltip-viewport"> <!--containing viewport for tooltip -->
    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
    </div>
    <input type="password" name="password2" id="verifyPassword" class="form-control" placeholder="Confirm" required>
    <div class="button-container">
        <button id="register-button" class="btn btn-lg btn-primary btn-block disabled" type="submit">Register</button>
        <div class="login-page-link-container">
            <a href="src/login.php" class="login-page-link">I'm already a member!</a>
        </div>
</form>
</div>

这是我的 forms.css 文件中的样式:

/*
TOOLTIP FOR PASSWORD STRENGTH
*/
.tooltip {
font-size: 16px;
}
.tooltip-inner {
background-color: red;
color: white;
}

最后，这是我编写的 Javascript 函数:

$(document).ready(function () {
    $('#inputPassword').strengthMeter('tooltip', { //#inputPassword is input id
        hierarchy: { //tooltip hierarchy

            '0': 'Your Password is Empty',
            '1': 'You\'re kidding right?',
            '10': 'Very Weak',
            '20': 'Kinda Weak',
            '30': 'Good',
            '40': 'Strong',
            '50': 'Very Strong'
        },
        tooltip: {
            viewport: '#tooltip-viewport'} //containing div for password input
    });
});

如果这不可能，我也无所谓。我试图搜索我下载的插件，并通过 Google 和 S.O. 进行搜索。没有给我任何关于我的代码设置方式的信息。

感谢您的帮助。

Answer 1

Bootstrap Strength Meter 中没有内置选项或回调，因此如果不修改底层库是不可能的(具体来说，需要扩展 tooltip.js 才能添加此功能)

来源:http://davidstutz.github.io/bootstrap-strength-meter/