Question

我有一系列if-else语句。我知道有一种更有效的方法可以做到这一点，但我对javascript不够熟悉。有人可以提供一些指导吗？

$('#webform-component-primary-credential--0').change (function() {
    if ($('#edit-submitted-primary-credential-0').val() == 35) {
      $('#edit-submitted-additional-credentials-0-47').attr('checked', false);
      $("#edit-submitted-additional-credentials-0-47").attr("disabled", "disabled");
    } else {
      $("#edit-submitted-additional-credentials-0-47").removeAttr("disabled");
    }
    if ($('#edit-submitted-primary-credential-0').val() == 41) {
      $('#edit-submitted-additional-credentials-0-53').attr('checked', false);
      $("#edit-submitted-additional-credentials-0-53").attr("disabled", "disabled");
    } else {
      $("#edit-submitted-additional-credentials-0-53").removeAttr("disabled");
    }
    if ($('#edit-submitted-primary-credential-0').val() == 13) {
      $('#edit-submitted-additional-credentials-0-29').attr('checked', false);
      $("#edit-submitted-additional-credentials-0-29").attr("disabled", "disabled");
    } else {
      $("#edit-submitted-additional-credentials-0-29").removeAttr("disabled");
    }   

});

本系列中还有大约12个if-else语句，但这给出了一般的想法。

Answer 1

如果您始终检查相同的值，请使用switch-case语句：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/switch

（这也可以用在C / C ++和许多其他借用它们语法的语言中。有些语言有变化，比如Ruby的case-when语法。）

你的代码实际上有点麻烦，可以考虑转换为case语句（它最适合一个长if () {} else if () {} ... else () {}链），但这是你可以做到的一种方式：

$('#webform-component-primary-credential--0').change (function() {
    var active_element;

    $("#edit-submitted-additional-credentials-0-47").removeAttr("disabled");
    $("#edit-submitted-additional-credentials-0-53").removeAttr("disabled");
    $("#edit-submitted-additional-credentials-0-29").removeAttr("disabled");

    switch ($('#edit-submitted-primary-credential-0').val()) {
        case 35:
            active_element = $("#edit-submitted-additional-credentials-0-47");
            break;
        case 41:
            active_element = $("#edit-submitted-additional-credentials-0-53");
            break;
        case 13:
            active_element = $("#edit-submitted-additional-credentials-0-29");
            break;
    }

    active_element.attr('checked', false);
    active_element.attr("disabled", "disabled");
});

Answer 2

这样的事可能有用：

$("#webform-component-primary-credential--0").change(function() {
    var primaryCred = $("#edit-submitted-primary-credential-0").val(), 
        credIdPrefix = "#edit-submitted-additional-credentials-0-", 
        credMap = { 35 : 47, 41 : 53, 13 : 29 };

    for (var cred in credMap) {
        if (primaryCred == cred) {
            $(credIdPrefix + credMap[cred]).attr({ "checked" : false, "disabled" : "disabled" });
        } else {
            $(credIdPrefix + credMap[cred]).removeAttr("disabled");
        }
    }
});

Answer 3

这是一种更清洁，更快捷的方式：

$(function() {
    var dependencies, $checkboxes;

    dependencies = {
        35: 47,
        41: 53,
        13: 29
    };

    $checkboxes = $(":checkbox[id^='edit-submitted-additional-credentials-0-']");

    $('#webform-component-primary-credential--0').change(function() {
        var primaryCredential, selector;
        primaryCredential = $('#edit-submitted-primary-credential-0').val();
        selector = "#edit-submitted-additional-credentials-0-" + dependencies[primaryCredential];

        $checkboxes
            .prop("disabled", false)
            .filter(selector)
            .prop({
                disabled: true,
                checked: false
            });
    });
});

如果你有这么多复选框，你应该缓存它们以提高性能。

Answer 4

您可以使用switch-case语句，如：

var credential = $('#edit-submitted-primary-credential-0').val();
$('#webform-component-primary-credential--0').change (function() {
switch (credential) {
   case 35:
      $('#edit-submitted-additional-credentials-0-47').attr('checked', false);
      $("#edit-submitted-additional-credentials-0-47").attr("disabled", "disabled");
      break;
   case 41:
      $('#edit-submitted-additional-credentials-0-53').attr('checked', false);
      $("#edit-submitted-additional-credentials-0-53").attr("disabled", "disabled");
      break;
   case 13:
      $('#edit-submitted-additional-credentials-0-29').attr('checked', false);
      $("#edit-submitted-additional-credentials-0-29").attr("disabled", "disabled");
      break;
   default:
      $("#edit-submitted-additional-credentials-0-47").removeAttr("disabled");
      $("#edit-submitted-additional-credentials-0-53").removeAttr("disabled");
      $("#edit-submitted-additional-credentials-0-29").removeAttr("disabled");
   }

}）;

Answer 5

我觉得这个更干净了。没有测试过代码。您可以扩展凭证对象以使用val和键数组。您还需要更改edit_additional_credentials（）实现。

$('#webform-component-primary-credential--0').change (function() {
    edit_additional_credentials();
});

var credentials = [
    {
        primary: 'edit-submitted-primary-credential-0',
        additional: [
            {
                key: 35,
                val: 'edit-submitted-additional-credentials-0-47'
            },
            {
                key: 41,
                val: 'edit-submitted-additional-credentials-0-53'
            },
            {
                key: 13,
                val: 'edit-submitted-additional-credentials-0-29'
            }
        ]
    }
];

function disable_additional_credential(id) {
    $('#' + id).attr('checked', false);
    $('#' + id).attr("disabled", "disabled");
}

function enable_additional_credential(id) {
    $('#' + id).removeAttr("disabled");
}

function edit_additional_credentials() {

    for (var i = 0; i < credentials.length; i++) {
        var val = $('#' + credentials[i].primary).val();

        for (var j = 0; j < credentials[i].additional.length; j++) {
            if (val == credentials[i].additional.key) {
                disable_additional_credential(credentials[i].additional.val);
            } else {
                enable_additional_credential(credentials[i].additional.val);
            }
        }
    }
}

长的javascript if else语句

5 个答案: