Question

我有以下表格字段。每当用户更改任何地址字段时，我想更新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

我建议从一个简单的对象开始，以保存表单值的状态。这与模型在Backbone示例中的作用类似：

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为＆＃34; city＆＃34;时，我将有条件地应用字符删除逻辑。或＆＃34;州＆＃34;。否则，我们只需将更改的输入值设置为相应的模型属性，如果值已更改，则调用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();
        }
    });

JQuery On Change事件函数

1 个答案: