Javascript JQuery-显示/隐藏一组字段

我想使用select的值作为条件来显示或隐藏一些字段。我不想为了显示和隐藏字段而重复自己再次扭曲循环。我想使用相同的循环代码来显示或隐藏。最好的方法是什么

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

---

谢谢。

您可以使用jQuery的toggle（）方法显示和隐藏元素：

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

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

这样，您就不必担心它们的状态，让jQuery知道它们是否需要隐藏

您还可以将布尔值传递给只显示或只隐藏元素的方法：

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

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

---

如果您需要执行一些额外的逻辑，您可以始终使用$（）.CSS（）查询元素的CSS属性，并决定从那里执行什么操作。

我认为这会起作用。确保使用option:selected获取select的值

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

hideFields();

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