JQuery 关于更改事件函数

Question

我有以下表单域。每当用户更改任何地址字段时，我都想更新 longaddress 字段，它是所有表单字段的串联字符串。我需要对城市和州字段进行一些清理，因为 longaddress 被传递到 google maps autocomplete

<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" >

目前，我使用 backbone 绑定字段以实现上述目标，如下所示：

    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，但我正在努力使用正确的语法将所有 backbone 函数转换为 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为"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();
        }
    });

JQuery 关于更改事件函数

JQuery On Change Event Functions

javascript

jquery

backbone.js