多个问题:
- 您的 passwordStrength() 函数未在 jsFiddle 的全局范围内定义,因此不会被调用。这可能是您设置 jsFiddle 的方式造成的,也许在您的实际代码中不是问题。
- 获取适当的 ratingMsg 的方法将不起作用,因为您没有每个可能分数的数组值,因此许多分数将生成“未定义”的 ratingMsg。
- 您的 CSS 类也很稀疏,因此有许多分数值与两者都不匹配,并且没有适当的 CSS 类/样式生效。如果您想要每个评级值都有一个特定的类,那么也许您应该将类名放入 ratings 数组中,以便可以从那里与 ratingsMsg 一起获取它。
对于第一个问题,在 jsFiddle 中,您还必须确保密码处理函数是在全局范围内定义的。您的 jsFiddle 设置方式并非如此(它位于 onload 处理程序中)。您可以在 jsFiddle 中修复此问题,只需将左上角的第一个下拉列表设置为“无换行(头部)”即可。
对于第二个问题,您正在使用:
ratingMsg[score]
但是,您的数组是一个稀疏数组,不能保证包含大多数可能分数的条目。您根本不能这样做,因为您访问的许多元素将具有未定义的值,这不会给您提供有意义的消息。例如,如果分数为 15,您将访问 ratingMsg[15],但数组中的该空间没有值,因此您不会获得有意义的评级消息。
解决方案是找到一种不同的方式来选择正确的消息。最简单的方法就是使用 if/else if/else if 语句来检查分数在哪个范围内并设置适当的消息。有更优雅的表驱动方法,但所有方法都将涉及搜索数据结构以查找当前分数位于哪两个值之间并使用该消息。
如果你看这个 jsFiddlehttp://jsfiddle.net/jfriend00/dA7XC/ http://jsfiddle.net/jfriend00/dA7XC/,您会看到您的代码被调用,但有时它只命中数组中的值。
而且,这是一个重写的算法,无论这个小提琴中显示的分数如何,它都能找到适当的消息:http://jsfiddle.net/jfriend00/jYcBT/ http://jsfiddle.net/jfriend00/jYcBT/.
它使用这样的数据结构:
var ratingMsg = [
0, "Unclassified",
10, "Weak",
20, "Fair",
50, "Better",
60, "Medium",
70, "Good",
90, "Strong"
];
和这样的 for 循环以获得适当的评级 Msg:
for (var i = ratingMsg.length - 2 ; i >= 0; i-=2) {
if (score >= ratingMsg[i]) {
msg = ratingMsg[i+1];
break;
}
}