JQuery - Показать / Скрыть группу полей

Question

Я хочу показать или скрыть некоторые поля, используя значение выбора в качестве критерия. Я не хочу повторяться, повторяя цикл, просто чтобы показать и скрыть поля. Я хочу использовать тот же код цикла, чтобы показать или скрыть. Какой лучший подход?

hideFields = function () {
    var fields = $(['#foo', '#bar', '#lorem', '#ipsum'])
        showHide = function (action) {
            if (action === 'show' || action === 'hide') {
                action = action + '();';
                fields.each(function (index, value) {
                    $(value).parent()
                        .parent()
                        .action(); // call show||hide here... not working...
                });
            }
        };

    if ($('#select').val() === 'something') {
        showHide('hide');
    }
    else {
        showHide('show');
    }
};

hideFields();

Спасибо.

Answer 1

Вы можете использовать метод toggle () jQuery, чтобы показать и скрыть элементы:

$(".fields").toggle();

Таким образом, вам не нужно беспокоиться об их состоянии, и jQuery определит, нужно ли их скрывать или нет.

Вы также можете передать логическое значение методу, который будет показывать или скрывать только элементы:

$(".fields").toggle(true); // Shows elements, equivalent to show()
$(".fields").toggle(false); // Hides elements, equivalent to hide()

И если вам нужно выполнить дополнительную логику, вы всегда можете запросить свойство CSS элементов, используя $ (). Css () и решить, что делать дальше.

Answer 2

Я думаю, это будет работать.Убедитесь, что вы используете option: selected, чтобы получить значение select.

function hideFields() {
    var fields = '#foo, #bar, #lorem, #ipsum';
    if ($('#select option:selected').val() === 'something') {
        $(fields).show();
    } else {
        $(fields).hide();
    }
}
hideFields();

Answer 3

var hideFields = function () {
    var $fields = $('#foo, #bar, #lorem, #ipsum');
    $fields.toggle(!($('#select').val() === 'something'));
};

hideFields();