0

要素の個々の行に合計フィールドを入力できない以下のコードがあります。

したがって、動的に挿入される各フィールドには同じフィールドが含まれます。その行内のフィールドのみを計算する必要があります。

ここにjsfiddleがありますhttp://jsfiddle.net/glennmartin/3TnyR/

var LabourItems = {
   rate: null,
   hours: null,
   total: null,
   init: function(object) {
      var rate = parseInt($(object).children('.rate').val(), 10);
      // var rate = $(object).children('.rate').first();
      var hours =parseInt($(object).children('.hours').val(), 10);
      this.total = Number(rate.val()) * Number(hours.val());
      this.updateTotal(object);
   },
   updateTotal: function(object) {
      $(object).children('.total').first().attr('value', this.total)
   }
}

//reactTochange for those inputs that you want to observe
$('.hours').on("click", function() {
   jQuery.each($('.labouritems'), function(key,value){
      LabourItems.init(value);
   });
});
4

1 に答える 1

1

ここにあなたのコードが働いています：

var LabourItems = {
   rate: null,
   hours: null,
   total: null,
   init: function(object) {
      this.rate = parseInt($(object).children('.rate').first().val(), 10);
      // var rate = $(object).children('.rate').first();
      this.hours =parseInt($(object).children('.hours').first().val(), 10);
      this.total = this.rate * this.hours;
      this.updateTotal(object);
   },
   updateTotal: function(object) {
      $(object).children('.total').first().val(this.total || 0);
   }
}

//reactTochange for those inputs that you want to observe
$('.labouritems input').on("keyup", function() {
   $('.labouritems').each( function(key,value){
      LabourItems.init(this);
   });
});

私が行った変更についてのコメントは次のとおりです。

  • あなたのinit関数varでは、オブジェクトのコンテキストで宣言した変数に代入するために使用していたので、var rateandvar hoursをthis.rateandに置き換えましたthis.hours
  • $(object).children('.rate')and呼び出しでは、関数を使用して最初の要素を選択する$(object).children('.hours')必要がありました。.first()これは、複数存在する可能性のあるクラス名で選択しているためです (存在しない場合でも、配列で返されることがわかります)。
  • $(object).children('.total').first().val(this.total || 0);:val()他の場所で値を取得するために使用したのと同じように、代入に使用できます。テキストボックスが空のときにthis.total返されるため、表示された場合(偽) は代わりに 0 が使用されます (興味がある場合は、それを削除して何が起こるかを確認してください)。NaN|| 0NaN
  • キーボード イベントの変更が必要であることは理解できたので、コードでkeydownイベントを使用するようにしました。もちろん、これは好きなように変更できます。
  • これらの値はすでに渡されているため、必要のないものをthis.total使用していたNumber()parseInt()
  • DOM セレクターeach()から呼び出される関数のコンテキストでは、この反復で要素を提供します。したがって、実際の要素を渡し、それを介して使用されます$()thisLabourItems.init(this);init$(object)

http://jsfiddle.net/3TnyR/1/を参照してください

まあ、それはほとんどそれです！

于 2012-10-20T08:34:20.170 に答える