Dynamiclly ändern element CSS mit Ajax + JSON

Zur Vereinfachung der Frage sagen wir mal ich habe eine Gruppe von Checkboxen (wenn ausgewählt - eine bestimmte Formatvorlage angewendet wurde) und a href-link.

<input type=checkbox  style="color:#0f0; background:#0f0; border:1px solid;" name=CHKB_3D unchecked>
<span id=CHKB_3D_span style="">3D Model</span><br/>
<input type=checkbox  name=CHKB_2D checked>
<span id=CHKB_2D_span style="color:#00D100;">2D Drawing</span><br/>
<input type=checkbox  name=CHKB_ST checked>
<span id=CHKB_ST_span style="color:#00D100;">Stack up</span><br/>
<a onclick="ajax_json_styling()" href="javascript:void(0);">click me to change style!</a>

Die Werte der Kontrollkästchen status in der Datenbank gespeichert sind.
Der server (PHP) sollte entscheiden, welche neue Farbe der checkbox-label (span) habe ich.
Wenn diese Option nicht ausgewählt -> während, wenn ausgewählt -> grün.

Habe ich eine funktionierende version für dieses Verhalten:
Wenn ich drücken href "speichern", ich schicke ajax-request php, der dann auf der server-Seite Schreibe ich die neuen Werte für die status der Checkboxen. Dann habe ich erstellen und echo einen versteckten DIV (später wird der Inhalt eval() verwenden, um neue Stil) mit spezifischen Stilen, basierend auf den aktuellen server-Daten für den Checkboxen.
Dann in Ajax ich eval() den Inhalt des versteckten DIV-und auf diese Weise die Anwendung der neuen styling basierend auf server-Daten für den Checkboxen.

Herausforderung ist die Migration von eval() JSON+JSON.parse().
Ich weiß, wie ich update mehrere DIVs Inhalte mit JSON (Ajax ich fest, das DIV mit einer bestimmten ID zu aktualisieren). Aber meine situation ist ein bisschen anders, weil ich brauche, um zu entscheiden, auf der server-Seite die element-update (basierend auf DB-Einträge).

Brauche ich nicht hardcoded code in JS oder JQuery, auf dem element, das für das styling, aber die Wahl, welches element getan werden sollte grammatikalisch basiert auf der server-Seite.

Kann ich das mit JSON?

Bitte geben Sie eine Logik oder ein einfaches Beispiel, wie ich das tun kann.

Vielen Dank im Voraus für jede Hilfe!!!

Ajax + JSON = Ajaj? Dies kann hilfreich sein - stackoverflow.com/questions/1036028/...

InformationsquelleAutor ihtus | 2012-01-20

2

können Sie es leicht ändern mit jQuery:
```
$("#your-div-id").css("your-attribute", "your-value");
```
- wie ich schon erwähnt habe: ich brauche, um zu entscheiden, auf der server-Seite das element, das den Stil geändert werden. In Ihrem code die element-ID ist fest in JQuery
- Checkboxen sind gezeichnet von Ihrem browser, so dass Sie haben, um zu bestimmen, Ihre Farbe auf der client-Seite. Sie können entweder senden Sie den Farbe Wert vom server und setzen Sie Sie mit der oben genannten syntax, oder entscheiden Sie sich für eine Farbe auf das Kontrollkästchen " Werte auf client-Seite (dann müssen Sie nur Werte speichern und nicht zu warten, server-Antwort, um die Farben)
InformationsquelleAutor lynxoid

Ich weiß nicht, was das format der Daten ist in, aber sagen wir mal es sieht so ähnlich aus wie diese:

{"checkboxes": {"CHKB_3D": "white", "CHKB_2D": "green", "CHKB_ST": "white"}}

Dann deinen AJAX-code würde wie folgt Aussehen:

$.ajax({
    url: '/some/server/script.php',
    data: { /* stuff */ }
    dataType: 'json',
    success: function(data) {
        for (var name in data.checkboxes) {
            $('#' + name + '_span').css('color', data.checkboxes[name]);
        }
    }
});

InformationsquelleAutor FtDRbwLXw6

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.