Question

下面的代码完美无缺，但if / else语句看起来很长很难看。有没有办法可以避免这些陈述？

CommissionTypeFilterVm是一个列表，其中包含下面显示的6个属性，其值为1或0。我想根据这些属性的值启用和禁用复选框：

CommissionType
CommissionTrials
OverrideType
OverrideTrials
BonusType
AdjustmentType

以下是代码：

   if (view != null) 
        {
            if (view.CommissionTypeFilterVm !=null && view.CommissionTypeFilterVm.length>0)
            {
                if (view.CommissionTypeFilterVm[0].CommissionType != 1) {
                    this.$commissionType.prop("checked", false).prop("disabled", true);
                } else {
                    this.$commissionType.prop("disabled", false).prop("checked", true);
                }
                if (view.CommissionTypeFilterVm[0].CommissionTrials != 1) {
                    this.$commissionTrails.prop("checked", false).prop("disabled", true);
                } else {
                    this.$commissionTrails.prop("disabled", false).prop("checked", true);
                }
                if (view.CommissionTypeFilterVm[0].OverrideType != 1) {
                    this.$overrideType.prop("checked", false).prop("disabled", true);
                } else {
                    this.$overrideType.prop("disabled", false).prop("checked", true);
                }
                if (view.CommissionTypeFilterVm[0].OverrideTrials != 1) {
                    this.$overrideTrails.prop("checked", false).prop("disabled", true);
                } else {
                    this.$overrideTrails.prop("disabled", false).prop("checked", true);
                }
                if (view.CommissionTypeFilterVm[0].BonusType != 1) {
                    this.$bonusType.prop("checked", false).prop("disabled", true);
                } else {
                    this.$bonusType.prop("disabled", false).prop("checked", true);
                }
                if (view.CommissionTypeFilterVm[0].AdjustmentType != 1) {
                    this.$adjustmentType.prop("checked", false).prop("disabled", true);
                } else {
                    this.$adjustmentType.prop("disabled", false).prop("checked", true);
                }
            }
        }

Answer 1

这可能取决于你确切的view.CommissionTypeFilterVm[0]对象（它有什么其他属性），但看起来你试图这样做：

var com = view.CommissionTypeFilterVm[0];
for (var key in com) { // if necessary check ownProperty
   this['$'+key.charAt(0).toLowerCase()+key.slice(1)]
      .prop({checked: com[key]==1, disabled: com[key]!=1});
}

Answer 2

if (view && view.CommissionTypeFilterVm && view.CommissionTypeFilterVm.length) {
    var vm = view.CommissionTypeFilterVm[0],
        props = ["CommissionType", "CommissionTrials", "OverrideType", "OverrideTrials", "BonusType", "AdjustmentType"];
    for (var i=0; i<props.length; i++) {
        var prop = props[i],
            bool = vm[prop] != 1,
            key = "$"+prop.charAt(0).toLowerCase()+prop.slice(1);
        this[key].prop({checked: !bool, disabled: bool});
    }
}

如果您分别命名属性，则可以解决难看的键操作问题。无论如何，你需要这样做，因为你在路径/试验中有拼写错误。

Answer 3

你可以创建一个静态地图并在其上循环：

    if (view != null && view.CommissionTypeFilterVm != null && view.CommissionTypeFilterVm.length > 0) 
{
    var mapping = [ 
        { type: 'CommisionType', ele: '$commisionType' },
        { type: 'CommissionTrials', ele: '$commissionTrails' },
        { type: 'OverrideType', ele: '$overrideType' },
        { type: 'BonusType', ele: '$BonusType' }
    ];
    var self = this;

    $.each(mapping, function() {
        if (view.CommissionTypeFilterVm[0][this.type] !==1) {
            self[this.ele].prop("checked", false).prop("disabled", true);
        } else {
            self[this.ele].prop("disabled", false).prop("checked", true);
        }
    });
}

希望有所帮助。

Answer 4

也许效率不高..试试这个

if (view != null) 
{
    if (view.CommissionTypeFilterVm !=null 
                    && view.CommissionTypeFilterVm.length>0)
    {
        var typeFilter = view.CommissionTypeFilterVm[0];
        var check = typeFilter.CommissionType === 0 ? true : false;
        this.$commissionType.prop({ 'checked' : !check , 'disabled' : check });
        check = typeFilter.CommissionTrials === 0 ? true : false;
        this.$commissionTrails.prop({ 'checked' : !check , 'disabled' : check });
        check = typeFilter.OverrideType === 0 ? true : false;
        this.$overrideType.prop({ 'checked' : !check , 'disabled' : check });
        check = typeFilter.OverrideTrials === 0 ? true : false;
        this.$commissionType.prop({ 'checked' : !check , 'disabled' : check });
        check = typeFilter.BonusType === 0 ? true : false;
        this.$bonusType.prop({ 'checked' : !check , 'disabled' : check });
        check = typeFilter.AdjustmentType === 0 ? true : false;
        this.$adjustmentType.prop({ 'checked' : !check , 'disabled' : check });
    }
}

如何避免JQuery中的if / else循环

4 个答案: