使用图像的 jQuery 密码强度计答案

【问题标题】：jQuery password strength meter that uses images使用图像的 jQuery 密码强度计
【发布时间】：2011-01-13 19:14:22
【问题描述】：

我正在寻找一种使用图像来说明密码强度的密码强度计。

我见过很多使用文本的，但我找不到将文本正确更改为所需图像的方法。

我可以使用任何简单的实现来满足我的需求吗？

谢谢，

【问题讨论】：

你的意思是像一个便士街机力量测试机，肌肉更大的人意味着更强大的密码吗？（奇怪的类比，但概念相同）？
您的问题到底是什么？你试过什么？只需使用 <img> 标记并更改 src 属性。或者更好的是，使用划分为多个区域的背景图像并通过 CSS 更改可见区域。
@Felix Kling - 我尝试使用这个n0nick.net/jquery/password-strength 示例并将 .js 文件中的文本位替换为 img 标签，但它只是回显标签而不显示图像。
您还必须将container.text() 更改为container.html()。也就是说，最好添加一次图像标记并更改图像的src 属性。

标签： jquery passwords

【解决方案1】：

我没有看到任何密码强度插件从框中提供此选项。只需使用您选择的插件并更改显示消息的代码部分并输入<img />。如果您对此有疑问，请告诉我您选择的插件，我会为您提供帮助。

代码：

container.text(settings.texts[level]).attr('class', 'password_strength ' + _class);

将 .text 更改为 .html 并记住像这样添加图像：

        'texts' : {
        1 : "<img src='....' />",
        2 : "<img src='....' />",
        3 : "<img src='....' />",
        4 : "<img src='....' />",
        5 : "<img src='....' />"
    }

一切都应该排序。

【讨论】：

我尝试使用这个 n0nick.net/jquery/password-strength 示例并将 .js 文件中的文本位替换为 img 标签，但它只是回显标签而不显示图像。
那是因为插件使用jquery的text()函数而不是html()所以不能添加html，改这个吧。