如何使用 JQuery 添加 number_field_tag 的值

Question

抱歉，我是在 Rails 中使用 Javascript 的新手。

我有 4 个 number_field_tags。 每当用户输入一个数字时，它会将所有 4 个 number_field_tag 的数字相加。我想知道我该怎么做。

我试过关注这个http://jsperf.com/jq-sum-elements-vs-raw-js，但我不知道如何调用这个函数。

<td class="method2">
                <p>Input the number of each base the primer should have</p>
                <label>Number of A :</label>
                <%= number_field_tag(:no_A,nil, in:0...36) %><br />
                <label>Number of T :</label>
                <%= number_field_tag(:no_T,nil, in:0...36) %><br />
                <label>Number of G :</label>
                <%= number_field_tag(:no_G,nil, in:0...36) %><br />
                <label>Number of C :</label>
                <%= number_field_tag(:no_C,nil, in:0...36) %><br />
                Total bases:<span></span>
</td>   

如何显示当前的总基数？

Answer 1

如果我正确地理解了您的问题，那么您有 4 个具有碱基的东西，并且您希望在用户在 number_field_tags 中输入信息时动态地显示碱基总数。为了实现这一点，我使用上面的代码 sn-p 并将“bases”类分配给每个 number_field_tags，并将“total-bases”的 id 分配给要显示总数的跨度。

<td class="method2">
  <p>Input the number of each base the primer should have</p>
  <label>Number of A :</label>
  <%= number_field_tag(:no_A,nil, in:0...36, class: 'bases') %><br />
  <label>Number of T :</label>
  <%= number_field_tag(:no_T,nil, in:0...36, class: 'bases') %><br />
  <label>Number of G :</label>
  <%= number_field_tag(:no_G,nil, in:0...36, class: 'bases') %><br />
  <label>Number of C :</label>
  <%= number_field_tag(:no_C,nil, in:0...36, class: 'bases') %><br />
  Total bases:<span id="total-bases"></span>
</td>

然后我编写了以下 jQuery 代码：

$(document).on("keyup change", ".bases", function() {
  totalSides();
});

function totalSides() {
  var tmp = 0;
  var total = 0;
  $(".bases").each(function() {
    tmp = parseInt($(this).val(), 10);
    if (isNaN(tmp)) {
      tmp = 0;
    };
    total = total + tmp;
  });
  $("#total-bases").html(total);
};

它的作用是在 number_field_tag 框内的任何键上或更改上，函数 totalSides 将运行。 totalSides 函数将临时变量 (tmp) 设置为 0，并将变量 total 设置为 0。然后它使用类“bases”遍历每个 number_field_tag。它将内容解析为整数。如果输入不是数字 (isNaN)，它会通过将 tmp 设置为 0 来转储它，否则它将变量 total 设置为 td 中所有 number_field_tags 内的值的总和。

然后它将跨度中的 html 设置为这个总数。

我认为这正是您所寻找的，希望对您有所帮助。如果您还有其他问题，请告诉我，我会尽力提供帮助。

重新思考您的验证问题并意识到，您可以使用内置的 number_field_tag 选项。您可以使用：

min: 6
max: 36

或者更简单，我们 :in => 6...36

in: 6...37

作为每个 number_field_tag 的选项。这比我的第一个想法要简单得多……这将使用 jQuery Validation 插件库……但是，当您想要对不太容易添加的东西进行验证时，熟悉 Validation 库是一件好事作为 rails 表单助手的选项。

您的原始代码使用 in: 0...36 - 应该像将 0 更改为 6 和 36 更改为 37 一样简单，从而为您提供 6-36 的允许范围。如果不是，请告诉我，我会重新包含一些 jQuery 验证代码并让你走上这条路。

http://apidock.com/rails/ActionView/Helpers/FormTagHelper/number_field_tag

http://jqueryvalidation.org/documentation/

这里是 jQuery validate 方法的一些示例代码：

jQuery.validator.addMethod("no-zero", function(value, element) {
return this.optional(element) || !/^0$/.test(value);
}, "Cannot be zero.");

基本上，只需将正则表达式替换为正确的正则表达式以验证 6 到 36 之间的值，然后在用户违反它时编写您想要抛出的错误消息。

Answer 2

对于使用 jQuery Validate 插件库，有几件事。

下载 jquery validate .min.js 文件，并将其放入 assets/javascripts 目录中的资产管道中。

然后在你的 application.js 文件中放

//require jquery.validate.min

然后，在 jquery.validate.min.js 文件里面，你可以放一个类似这样的方法

jQuery.validator.addMethod("no-zero", function(value, element) {
    return this.optional(element) || !/^0$/.test(value);
}, "Cannot be zero.");

这或多或少的语法总是如此 - 请注意我使用了一些通用名称，以便向您展示放置内容的位置。

jQuery.validator.addMethod("methodName", function(value, element) {
  return this.optional(element) || /regex/.test(value);
}, "Error message here");

编写正则表达式来测试您想要验证的内容。要检查您的正则表达式，一个好的网站是 www.rubular.com

要在视图中应用验证，您需要为表单中要验证的内容分配一个类。例如，现在你有

class: 'bases'

你会添加到它并有类似的东西

class: 'bases validation-method-name'

这种方法的一个好处是您可以在整个应用程序中重复使用验证。

差点忘了这个：

您需要在页面上添加一个 js 文件（或在现有 js 文件中包含类似以下内容）。你会有这样的东西：

$(".method2").validate();

这会调用您需要从 jquery 验证库中对 number_field_tags 运行验证的内容。