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 ステートメントを考慮に入れるのが少し面倒ですが (1 つの長いif () {} else if () {} ... else () {}チェーンに最適です)、これを行う 1 つの方法を次に示します。

$('#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

これはもっときれいだと思います。コードをテストしていません。資格情報オブジェクトを拡張して、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 に答える