使用Rails/Jquery创建动态更新的进度条？

这是我的第一个“常规”问题-我不想找任何人为我编写一行代码，我只需要一些建议

我正在寻找一种方法来实现一个进度条/温度计（最好是在jquery中），当用户在我的Rails应用程序中将数据输入表单时，它会动态更新。我不关心表单字段的值，只关心它们是否已填写。单个字段将具有硬编码的权重（即填写您的姓名给您1分，电子邮件给您10分等），以非常ajax-y异步的方式增加状态栏的计数/百分比。我不想非得发布或刷新才能看到进度条的状态

我有一种感觉，我将不得不使用一些预先制作好的jquery库，如以下之一：

关键是：我甚至无法让这些进度条接受Rails FormHelper表单中用户输入的数据。我看过所有的API文档和类方法，不知道从哪里开始

这样怎么样？你能把这个n00b指向正确的方向吗？有什么好的例子吗

提前谢谢

---

~Dan

我想你可以通过jQuery来完成整个任务。这就是我想象它是如何工作的——也就是说，不是写代码，而是帮助你更好地思考这个问题

首先，您有几个输入，让我们只说有5个，使它容易，他们都是文本类型

<input type="text" name="first" value="" />
<input type="text" name="second" value="" />
<input type="text" name="third" value="" />
<input type="text" name="fourth" value="" />
<input type="text" name="fifth" value="" />

然后，简单的做法是在每个元素发生更改时更新该值

首先查找更改：

$('input').change(function(){
    // Code goes here to update
});

你需要记住的下一件事是，价值既是一个获取者，也是一个设定者。因此，只需获取该值，将其分配给变量，然后更新该值，该值可能如下所示

currentValue = parseInt($("#progressbar").progressbar('value')) + 20;
$("#progressbar").progressbar('value',currentValue);

---

再说一次，我还没有测试过这个，但这是我最好的猜测，关于如何非常容易地做到这一点。

除了米奇所说的之外。我建议使用jquery提供的

focusout（）

事件。用户离开后，您可以检查每个输入框的内容。

请注意，我给了它一个快速测试，您可以在这里看到工作代码：如果我能给您500票，我会的！现在，如果我能弄清楚，如果该字段被清除，如何使progressbar值减/减。progressbar现在不在这两个小提琴中显示。知道为什么吗？我在多个浏览器中进行了测试。昨晚（我想是早上吧！）它工作得很好~ Dant原因是我的CSS服务器死掉了：-（我的应用程序中已经有了基本的功能。真是太感谢你了，伙计！

$('input').change(function(){
    // Code goes here to update
});

currentValue = parseInt($("#progressbar").progressbar('value')) + 20;
$("#progressbar").progressbar('value',currentValue);