JQuery On Changeイベント関数

Question

私は以下のフォームフィールドを持っています。ユーザーがアドレスフィールドのいずれかを変更すると、すべてのフォームフィールドの連結された文字列であるlongaddressフィールドを更新したいと思います。 longaddressは、Googleマップのオートコンプリートに渡されるので、私は

<input id="address1" type="text" value="" name="address1" > 
<input id="address2" type="text" value="" name="address2" > 
<input id="city" type="text" value="" name="city" > 
<input id="state" type="text" value="" name="state" > 
<input id="postcode" type="text" value="" name="postcode" > 
<input id="country" type="text" value="" name="country" > 

<input id="longaddress" type="text" value="" name="longaddress" > 

都市と州フィールド上のいくつかの消毒が必要な現在、私は次のようにバックボーンを使用して、上記達成するためにフィールドをバインドします

initialize: function() { 
     c.bindAll(this, "updateLongAddress"), this.on({ 
      "change:address1 change:address2 change:postcode change:country": this.updateLongAddress, 
      "change:city": this.removeUnwantedContentFromProperty.bind(this, "city"), 
      "change:state": this.removeUnwantedContentFromProperty.bind(this, "state") 
     }) 
    }, 
    removeUnwantedContentFromString: function(a) { 
     return a ? a.replace(/[\s,.]+$/, "") : void 0 
    }, 
    removeUnwantedContentFromProperty: function(a) { 
     var b = this.get(a), 
      c = this.removeUnwantedContentFromString(b); 
     if (b) return c !== b ? void this.set(a, c) : void this.updateLongAddress() 
    }, 
    updateLongAddress: function() { 
     this.set("longaddress", this.getComputedLongAddress().substring(0, 255)) 
    }, 
    getComputedLongAddress: function() { 
     return this.get("address1") || this.get("address2") || this.get("city") || this.get("state") || this.get("postalcode") || this.get("country") ? c.reduce([this.get("address1"), this.get("address2"), this.get("city"), this.get("state"), this.get("postcode"), this.get("country")], function(a, b) { 
      return b = b.trim(), b && (a = a ? a + ", " + b : b), a 
     }, "") : "" 
    } 

私がする必要が上記のコードを私が以下で試したJqueryに変換しますが、私はすべてのバックボーン関数をJqueryに変換する正しい構文に苦しんでいます。

$(function() { 

    initialize(); 

}); 


var initialize = function() { 

    $("#address1, #address2, #postcode, #country").on('change', updateLongAddress); 
    $("#city").on('change', removeUnwantedContentFromProperty); 
    $("#state").on('change', removeUnwantedContentFromProperty); 

}; 

var removeUnwantedContentFromProperty = function(a) { 
    var b = this.get(a), 
     c = this.removeUnwantedContentFromString(b); 
    if (b) return c !== b ? void this.set(a, c) : void this.updateLongAddress() 
}; 

var removeUnwantedContentFromString = function(a) { 
    return a ? a.replace(/[\s,.]+$/, "") : void 0 
}; 

var updateLongAddress = function() { 
    this.set("longaddress", this.getComputedLongAddress().substring(0, 255)) 
}; 

var getComputedLongAddress = function() { 
    return this.get("#address1") || this.get("#address2") || this.get("#city") || this.get("#state") || this.get("postcode") || this.get("country") ? c.reduce([this.get("address1"), this.get("address2"), this.get("city"), this.get("state"), this.get("postcode"), this.get("country")], function(a, b) { 
     return b = b.trim(), b && (a = a ? a + ", " + b : b), a 
     }, "") : "" 
}; 

助けてください。

Answer 1

フォーム値の状態を保持するには、単純なオブジェクトから開始することをお勧めします。これは、モデルがあなたのバックボーンの例ではやっているだろうかと目的が似ている：

var model = { 
    address1: '', 
    address2: '', 
    city: '', 
    state: '', 
    postcode: '', 
    country: '' 
}; 

なお、当社の入力フィールドのid属性にモデルマップのプロパティ名。これは値をマッピングする際に役立ちます。

長いアドレス値は、空のモデル値を除外し、残りの値をコンマ区切り文字で結合することで得られます。結果は255文字以内で入力してください。

var updateLongAddress = function() { 
    var value = [ 
     'address1', 
     'address2', 
     'city', 
     'state', 
     'postcode', 
     'country' 
    ] 
     .map(key => (model[key] || '').trim()) 
     .filter(val => Boolean(val.length)) 
     .join(', ') 
     .substring(0, 255); 

    $('#longaddress').val(value); 
}; 

入力フィールドのすべての変更イベントに対して、単一のイベントハンドラを使用します。変更された要素のidが "city"または "state"である場合、条件付きで文字削除ロジックを適用します。それ以外の場合は、変更された入力の値を対応するモデルプロパティに設定し、値が変更されている場合はupdateLongAddressを呼び出します。

$('#address1, #address2, #city, #state, #postcode, #country') 
    .on('change', function (e) { 
     var $target = $(e.target); 
     var key = $target.attr('id'); 
     var value = $target.val(); 

     // string replacement logic from `removeUnwantedContentFromProperty` 
     if (key === 'city' || key === 'state') { 
      value = value.replace(/[\s,.]+$/, ''); 
     } 

     // conditional update logic from `removeUnwantedContentFromProperty` 
     // although this isn't applied to all fields in the example, 
     // it shouldn't change anything to apply it to all inputs. 
     if (model[key] !== value) { 
      model[key] = value; 
      updateLongAddress(); 
     } 
    });