Ich versuche ein Javascript-Objekt zu erstellen, das den Status eines Formulars verfolgt. Mein erster Stich war eine langwierige "prozedurale" jQuery-Lösung, bei der ich jedes Formularfeld durchlaufen, testen, ob es auf "All" gesetzt ist, die active
Klasse entfernen oder es hinzufügen, wenn es nicht da ist. Dies ist eine kurze Version:JavaScript-Objekt an DOM binden
function activeClass() {
if(this.val() === 'All') {
$(this).parent().removeClass('active');
}
$('#content-filter select', context).foreach(function() {
if(this.val() !== 'All') {
this.addClass('active');
}
});
}
Wir machen eine ganze Reihe von anderen Dingen, so wird der Code immer lang. Die nächste Richtung, die ich nehmen möchte, besteht darin, ein separates Objekt zu erstellen, das den Formularstatus verfolgt und Ereignis-Listener verwendet, um den Formularzustand zu aktualisieren, wenn er sich ändert.
formState = {
featured: false,
all: false,
category: 'All',
topics: 'All',
audience: 'All',
date: {value: '', min: '', max: '', filter_op: '='},
};
Der Teil, mit dem ich kämpfe, ist, wie Sie das Objekt an das DOM binden. Meine erste Neigung ist so etwas wie dies zu tun:
$('select').on('change', function() {
formState[$(this).attr('id')] = $(this).val();
});
Das Problem hierbei ist, dass die id
des Auswahl hat die Eigenschaft, entsprechen. Außerdem wurde mir gesagt, dass die Methode hierfür eine Getter- und/oder Setter-Methode ist, um diese Werte zu ändern. Ich verstehe, was das bedeutet, aber wo ich verwirrt bin, ist, wie diese an das DOM gebunden werden.
Warum verwenden Sie ein separates Objekt, um den Status zu verfolgen, wenn Sie nur den Status aus dem DOM-Element abrufen können? – Barmar
Wenn Sie einen zusätzlichen Status für das Element beibehalten möchten, können Sie die Methode '.data()' von jQuery verwenden, um beliebige Daten mit einem DOM-Element zu verknüpfen. – Barmar