Ich arbeite an einer Webanwendung, die Ajax verwendet, um mit dem Server zu kommunizieren. Meine spezifische Situation ist die folgende:
Ich habe eine Liste von Benutzern in der HTML-Seite ausgekleidet. Auf jedem dieser Benutzer kann ich Folgendes tun: Ändern Sie ihren Status oder entfernen Sie sie aus dem Konto.
Was ist eine gute Vorgehensweise zum Speichern von Informationen auf der Seite über Folgendes:
P.S .: Ich benutze jQuery.
Es gibt viele Diskussionen darüber, was am besten ist. Sie können die Daten auf viele Arten speichern, und alle machen jemanden glücklich - benutzerdefinierte Attribute werden natürlich nicht validiert, wenn Sie XHTML verwenden, und Klassen zu verwenden, um ein oder zwei Datenbits zu speichern, ist bestenfalls unbeholfen und wird nur noch schlechter mit Menge von Dingen, die Sie wissen wollen. Persönlich bin ich nicht nur ein großer Fan von XHTML, ich bin auch nicht viel von einem Validierungs-Nazi, also empfehle ich, mit den benutzerdefinierten Attributen zu gehen.
Es gibt jedoch eine Option, die benutzerdefinierte Attribute mit Standards abstimmt: data- attributes. Wie John Resig (der Autor von jQuery) in seinem Blog schreibt , ist dies ein neues Attribut in HTML5 eingeführt, mit dem Sie benutzerdefinierte Datenattribute mit data- angeben können Präfix. Ein perfekt gültiges Element könnte also so aussehen:
Das hat den Vorteil, dass Sie, während Sie immer noch benutzerdefinierte Attribute verwenden, möglicherweise schlecht sind, wenn Sie XHTML verwenden, wird Ihr Code sehr gut altern, da dies die Art ist, die wir speichern werden Daten in Bezug auf einen bestimmten Artikel in der Zukunft.
Eine weitere Lektüre ist Attribute & gt; Klassen: Benutzerdefinierte DOM-Attribute für Spaß und Profit.
Wenn Sie benutzerdefinierte Attribute verwenden, fügen Sie für das Listenelement eines Benutzers Attribute für die Variablen hinzu:
%Vor%Die Werte können dann mit der Attr-Funktion erhalten werden:
%Vor%Und
%Vor%Hinweis: Die Selektoren müssen natürlich geändert werden,
Bitte beachten Sie, dass die Verwendung von benutzerdefinierten Attributen unterschiedlich ist - dies sollte jedoch für jeden gängigen Browser in Ordnung sein. Es ist auch die am wenigsten komplexe Lösung, die ich mir vorstellen kann. Es muss nicht zu Geschwisterelementen gesprungen werden, um Daten zu erhalten, oder um Elemente in der Nähe zu finden, die alle einen kleinen Overhead zur Verarbeitung hinzufügen können - ich versuche, die Menge zusätzlichen Bloats zu minimieren, die ich dem DOM bei solchen Dingen hinzufüge / p>
jQuery-Daten
Wenn Sie benutzerdefinierte Daten für ein jQuery-Objekt speichern möchten, verwenden Sie die Datenfunktion .
%Vor%HTML5-Daten - * Attribute
Sie können auch die Attribute HTML5 data-* verwenden, obwohl die APIs für den Zugriff auf diese nur teilweise von den verschiedenen Browsern unterstützt werden. Hier finden Sie weitere Informationen .
programmgesteuert:
%Vor%Versteckte Felder
Wenn Sie die alten browserkompatiblen Methoden verwenden und die Metadaten direkt in Ihren HTML-Code einfügen möchten, können Sie versteckte Felder verwenden. Es ist ein bisschen gröber, aber einfach genug zu tun.
%Vor%Sie können jQuery-Selektoren problemlos verwenden, um Ihre Liste abzufragen und HTML-Blöcke zu suchen, die Benutzerelemente enthalten, die die entsprechenden ausgeblendeten Felder enthalten Passe die Metadaten an, nach denen du suchst.
In diesem Fall denke ich, dass benutzerdefinierte Attribute übertrieben sind. Sie können die Benutzer-ID im id -Attribut speichern, da es nur eine Instanz des Benutzers in der Liste gibt, richtig? Außerdem könnte der Status des Benutzers im class -Attribut gespeichert werden. Auf diese Weise könnte jeder Benutzer in CSS ein anderes Styling erhalten, wie beispielsweise grün für aktiv, gelb für ein nicht aktiviertes Konto und rot für ein gesperrtes Konto.
Der Code zum Abrufen des Status ist jedoch ein wenig komplexer im Vergleich zur Verwendung eines benutzerdefinierten Attributs (aber nur, wenn Sie auch mehrere Klassen haben möchten). Positiv ist zu vermerken, dass HTML mit diesem Ansatz validiert wird, während dies mit benutzerdefinierten Attributen nicht möglich ist.
%Vor%Je nachdem, welche Art von Daten Sie speichern und wie viele Informationen Sie generell auf der Seite speichern, gibt es verschiedene Möglichkeiten. Es ist am besten, ein konsistentes Schema zu entwickeln, so dass Sie einen einfachen Bibliotheksaufruf schreiben können, um die Arbeit zu erledigen. Zum Beispiel
Sie können Daten in der Klasse eines bestimmten Elements speichern. Dies kann zusätzliche Wrapper-Elemente erfordern, um eine zusätzliche Klasse zur Verfügung stellen zu können, um Ihr CSS zu steuern. Dies schränkt auch das speicherbare Inhaltsformat ein. Die Benutzer-ID passt möglicherweise gut in ein Klassenattribut.
Sie können Daten in einem unbenutzten href eines Javascript-aktivierten Links speichern. Dies hat die zusätzliche Funktion, die Daten in der Statusleiste als Teil der URL beim Rollover anzuzeigen. Zum Beispiel können Sie '# userid' oder auch nur 'userid' in der href speichern.
Sie können Daten in zusätzlichen Elementen speichern. Zum Beispiel können Sie ein geschachteltes Div mit einer Klasse haben, die Speicher anzeigt, der auch CSS auslöst, um das Element aus der Anzeige zu nehmen. Dies ist die allgemeinste und umfangreichste Unterstützung, die Sie wahrscheinlich in der Seite arrangieren können.
Anstelle eines verschachtelten Divs könnten Sie auch verschachtelte Eingabeparameter mit type="hidden" verwenden. Dies ist etwas mehr erwartet / traditionell und erfordert keine CSS, um sie aus dem Display zu nehmen. Sie können das ID-Attribut verwenden, um diese Eingaben zu identifizieren, oder Sie können den Speicherort auf der Seite verwenden. Zum Beispiel, legen Sie sie in den Link, dass der Benutzer klickt und dann nur in den aktuellen Link in der onclick-Handler suchen.
Um die Frage zu beantworten, wie man es in das Dokument hineinbringt, schlage ich ein ähnliches Layout vor:
%Vor%Damit können Sie einfach viele Informationen über Ihre Benutzer auswählen:
%Vor%Dann ist es auch in Ihren Event-Handlern leicht, den aktuellen Status zu erhalten:
%Vor% Eine andere Alternative besteht darin, Javascript auf der Seite abzulegen und es einfach mit der Funktion jquery data zu speichern, um die Daten zu speichern, sobald die Seite geladen wird. Du brauchst trotzdem eine ID für das Element, um die richtige zu finden.
Tags und Links javascript html jquery