-3

ユーザーがボタンをクリックするたびに、DOMに挿入された新しいインスタンスを取得する以下のdivクラス「labouritems」があります。

「.rate」フィールドと「.hours」フィールドを計算し、「.total」フィールドに答えを設定できるようにする必要があります。

これは、ユーザーが作業している「labouritems」のインスタンスのみを対象としています。つまり、別のインスタンスでフィールドの合計を更新してはならないので、基本的にはその行内で機能します。

以下は私が使用しているhtmlであり、その下は「labouritems」の最初のインスタンスでのみ機能するコードですが、新しいものを挿入しても何もしません。 

 <div class="labouritems">
        <label for="quote_labouritems_attributes_0_description">Description</label>
        <input class="input-medium" id="quote_labouritems_attributes_0_description" name="quote[labouritems_attributes][0][description]" size="30" type="text" value="concrete the house">
        <label for="quote_labouritems_attributes_0_hours">Hours</label>
        <input class="input-mini hours" id="quote_labouritems_attributes_0_hours" name="quote[labouritems_attributes][0][hours]" size="30" type="text" value="33">
        <label for="quote_labouritems_attributes_0_total">Total</label>
        <input class="input-mini total" id="quote_labouritems_attributes_0_total" name="quote[labouritems_attributes][0][total]" size="30" type="text" value="1089">
        <label for="quote_labouritems_attributes_0_Mup/Hr">Mup/hr</label>
        <input class="input-mini" id="quote_labouritems_attributes_0_muphourrate" name="quote[labouritems_attributes][0][muphourrate]" size="30" type="text" value="0">
          <label for="quote_labouritems_attributes_0_Mup/Total">Mup/total</label>
        <input class="input-mini" id="quote_labouritems_attributes_0_muptotal" name="quote[labouritems_attributes][0][muptotal]" size="30" type="text" value="0">
        <label for="quote_labouritems_attributes_0_Mup/%">Mup/%</label>
        <input class="input-mini" id="quote_labouritems_attributes_0_muppercent" name="quote[labouritems_attributes][0][muppercent]" size="30" type="text">
        <label for="quote_labouritems_attributes_0_Contractor">Contractor</label>

        <input class="input-small" data-autocomplete="/contractors/autocomplete_contractor_firstname" data-update-elements="{&quot;id&quot;:&quot;#quote_labouritems_attributes_0_contractor_id&quot;,&quot;hourly_rate&quot;:&quot;#quote_labouritems_attributes_0_contractor_rate&quot;}" id="quote_labouritems_attributes_0_contractor_name" name="quote[labouritems_attributes][0][contractor_name]" placeholder="Seach" size="30" type="text" value="bing lee">
        <input id="quote_labouritems_attributes_0_contractor_id" name="quote[labouritems_attributes][0][contractor_id]" type="hidden" value="1">
        <label for="quote_labouritems_attributes_0_Rate/hr">Rate/hr</label>
        <input class="input-mini rate" id="quote_labouritems_attributes_0_contractor_rate" name="quote[labouritems_attributes][0][contractor_rate]" size="30" type="text" value="33">
        <label for="quote_labouritems_attributes_0_Work %">Work %</label>
        <input class="input-mini" id="quote_labouritems_attributes_0_progress_percent" name="quote[labouritems_attributes][0][progress_percent]" size="30" type="text" value="55">
        <label for="quote_labouritems_attributes_0_Work $">Work $</label>
        <input class="input-mini" id="quote_labouritems_attributes_0_progress_payment" name="quote[labouritems_attributes][0][progress_payment]" size="30" type="text">

        <input id="quote_labouritems_attributes_0__destroy" name="quote[labouritems_attributes][0][_destroy]" type="hidden" value="false"><a href="javascript:void(0)" class="btn btn-small btn-danger remove_nested_fields" data-association="labouritems">Delete</a>
    </div>​




 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
$('.hours').on("keyup", function() {
   $('.labouritems').each( function(key,value){
      LabourItems.init(this);
   });
});
4

1 に答える 1

0

試す

$(documents).on("keyup", '.hours', function() {
    LabourItems.init(this.closest('.labouritems'));
});

これ
により、1。時間ごとの要素ではなく、ドキュメントにhours.keyupイベントが添付されます
。2。変更された要素のみの合計が更新されます。

于 2012-10-21T00:10:07.700 に答える