JQuery On Change 이벤트 함수

Question

다음 양식 필드가 있습니다. 사용자가 임의의 주소 필드를 변경할 때마다 모든 양식 필드의 연결된 문자열 인 longaddress 필드를 업데이트하려고합니다. 다음과 같이 longaddress가 구글 맵 자동 완성으로 전달되기 때문에 나는이 도시와 국가 필드에 대한 몇 가지 위생을 필요로

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