0

我有一长串 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 语句，但这给出了总体思路。

4

5 回答 5

6

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

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

您的代码实际上有点麻烦，因为它包含在 switch-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");
});
于 2012-12-01T20:09:02.973 回答
4

像这样的东西可能会起作用：

$("#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");
        }
    }
});
于 2012-12-01T20:24:18.283 回答
1

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

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

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

于 2012-12-01T20:46:13.480 回答
0

您可以使用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");
   }

});

于 2012-12-01T20:14:53.473 回答
0

我觉得这个更干净。没有测试过代码。您可以扩展凭证对象以使用 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);
            }
        }
    }
}
于 2012-12-01T21:17:03.187 回答