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>

現在の総塩基数を表示するにはどうすればよいですか?

score 2 · Accepted Answer

私があなたの質問を正しく理解している場合、塩基を持つものが 4 つあり、ユーザーが number_field_tags に情報を入力するときに、塩基の合計を動的に表示したいと考えています。これを実現するために、上記のコードスニペットを使用して、各 number_field_tags に「bases」のクラスを割り当て、合計を表示するスパンに「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 関数は、変数 total を 0 に設定するだけでなく、一時変数 (tmp) を 0 に設定します。次に、クラス「bases」を使用して各 number_field_tag を反復処理します。内容を整数に解析します。入力が数値でない場合 (isNaN)、tmp を 0 に設定してダンプします。それ以外の場合は、変数 total を td のすべての number_field_tags 内の値の合計に設定します。

次に、スパン内の html をこの合計に設定します。

これがあなたが探していたものだと思います。うまくいけば、これが役に立ちます。他にご不明な点がございましたら、お気軽にお問い合わせください。できる限りお手伝いさせていただきます。

検証の質問を考え直して、組み込みの number_field_tag オプションを使用できることに気付きました。以下を使用できます。

min: 6
max: 36

またはさらに簡単に、 us :in => 6...36

in: 6...37

各 number_field_tag のオプションとして。これは、jQuery Validation プラグインライブラリを使用する私の最初のアイデアよりもはるかに単純です。レールフォームヘルパーへのオプションとして。

元のコードでは 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.");

基本的には、正規表現を適切な正規表現に置き換えて 6 ～ 36 の値を検証し、ユーザーが違反した場合にスローするエラーメッセージを記述します。

score 0 · Accepted Answer

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();

これは、number_field_tags で検証を実行するために jquery 検証ライブラリから必要なものを呼び出します。

javascript - JQuery の使い方 number_field_tag の値を追加

2 に答える 2

Related

Reference