Question

我是编码的新手，但一直在阅读有关DRY的内容 - 不要重复自己。

我有一个不符合DRY方法的JavaScript if / else语句，但我无法研究如何编写JavaScript if / else语句，以便不重复内容。

我希望比我更聪明的人可以告诉我。

这是我的代码：

    {% if user.get_profile.subscription_category == '00' %}

        $('#id_name_details_prefix_title').addClass('kmw-disabled');

        $('#id_name_details_first_name').addClass('kmw-disabled');

        $('#id_name_details_middle_name').addClass('kmw-disabled');

        $('#id_name_details_last_name').addClass('kmw-disabled');

        $('#id_name_details_suffix_title').addClass('kmw-disabled');

    {% else %}

        {% if user.get_profile.display_virtual_keyboard %}

            $('#id_name_details_prefix_title').removeClass('kmw-disabled');

            $('#id_name_details_first_name').removeClass('kmw-disabled');

            $('#id_name_details_middle_name').removeClass('kmw-disabled');

            $('#id_name_details_last_name').removeClass('kmw-disabled');

            $('#id_name_details_suffix_title').removeClass('kmw-disabled');

        {% else %}

            $('#id_name_details_prefix_title').addClass('kmw-disabled');

            $('#id_name_details_first_name').addClass('kmw-disabled');

            $('#id_name_details_middle_name').addClass('kmw-disabled');

            $('#id_name_details_last_name').addClass('kmw-disabled');

            $('#id_name_details_suffix_title').addClass('kmw-disabled');

        {% endif %}

    {% endif %}

第一个if的内容在第二个if语句的else中重复 - 我希望我只需要写一次重复的内容。

Answer 1

您可以将选择器放在数组中

var selectors = [#id_name_details_prefix_title', '#id_name_details_first_name' ...];

然后添加/删除类

$(selectors.join(',')).addClass('kmw-disabled')

Answer 2

将其分解为能够隔离正在发生的事情的函数。

{% if something %}
    functionThathAddsClass();
{% else %}
    {% if something_else %}
        functionThatRemovesClass();
    {% else %}
        functionThathAddsClass();
    {% endif %}
{% endif %}

在这种情况下，您将遇到创建两个全局函数的问题，但这是一个不同的问题。

我喜欢制作，我个人称之为CSS Guards。 CSS Guard基本上只是一个对象，它具有在DOM上戳戳和激活的函数。

var NameDetailsGuard = {
    functionThathAddsClass = function () {
        $('#id_name_details_prefix_title').addClass('kmw-disabled');
        $('#id_name_details_first_name').addClass('kmw-disabled');
    },
    functionThatRemovesClass = function () {
        $('#id_name_details_prefix_title').removeClass('kmw-disabled');
        $('#id_name_details_first_name').removeClass('kmw-disabled');
    }
};

你就像这样使用它

NameDetailsGuard.functionThatAddsClass();

这样做的一个额外好处是，如果你扩展这个概念，你可以开始在这个对象中做更简单的DOM节点缓存，这样每次你保留对它的引用并操纵它时，而不是查询选择器。

Answer 3

您可以将一些类添加到所需元素（在HTML标记中）并按该类选择。

例如，添加category-zero和virtual-keyboard类并使用以下内容：

{% if user.get_profile.subscription_category == '00' %}

    $('.category-zero').addClass('kmw-disabled');

{% else %}

    {% if user.get_profile.display_virtual_keyboard %}

        $('.virtual-keyboard').removeClass('kmw-disabled');

    {% else %}

        $('.virtual-keyboard').addClass('kmw-disabled');

    {% endif %}

{% endif %}

javascript - dry - 嵌套if语句

3 个答案: