javascript - dry语句

Question

我对编码还不熟悉，但我一直在读关于干-不要重复你自己。

我有一个不适合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语句的其他部分中重复--我希望我只需要写一次重复的内容。

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警卫。CSS卫队基本上只是一个对象，它的功能是戳和刺激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 %}