javascript - 如何使用 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 中输入信息时动态地向用户显示所有基础。为实现这一点，我使用上面的代码片段并将“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 框中的任何 keyup 或更改上，函数 totalSides 将运行。 totalSides 函数将临时变量 (tmp) 设置为 0，并将变量 total 设置为 0。然后它使用类“bases”迭代每个 number_field_tag。它将内容解析为整数。如果输入不是数字 (isNaN)，它会通过将 tmp 设置为 0 来转储它，否则它会将变量 total 设置为 td 中所有 number_field_tags 内的值的总和。

然后它将 span 中的 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 验证方法的一些示例代码:

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

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