JQuery - Eine Gruppe von Feldern anzeigen/ausblenden

Question

Ich möchte einige Felder anzeigen oder ausblenden, indem ich den Wert eines Select-Elements als Kriterium verwende. Ich möchte mich nicht wiederholen, indem ich die Schleife erneut schreibe, um Felder anzuzeigen und auszublenden. Ich möchte denselben Schleifen-Code verwenden, um anzuzeigen oder auszublenden. Was ist der beste Ansatz?

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(); // hier show||hide aufrufen... funktioniert nicht...
                });
            }
        };

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

hideFields();

Danke.

Answer 1

Sie können die toggle()-Methode von jQuery verwenden, um Elemente anzuzeigen und auszublenden:

$(".Felder").toggle();

So müssen Sie sich keine Sorgen um ihren Zustand machen und jQuery entscheiden lassen, ob sie ausgeblendet werden müssen oder nicht.

Sie können auch einen Booleschen Wert an die Methode übergeben, der nur die Elemente anzeigen oder nur ausblenden wird:

$(".Felder").toggle(true); // Zeigt Elemente an, äquivalent zu show()
$(".Felder").toggle(false); // Blendet Elemente aus, äquivalent zu hide()

Und wenn Sie zusätzliche Logik benötigen, können Sie immer die CSS-Eigenschaft der Elemente abfragen und entscheiden, was Sie dort tun möchten.

Answer 2

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

hideFields();

Answer 3

Ich denke, das wird funktionieren. Stellen Sie sicher, dass Sie option:selected verwenden, um den Wert des Dropdowns zu erhalten.

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