Zustand eines Switch abfragen mittels JS

[darkon]

Hallo zusammen,

bastel gerade an einer Tablet-UI fürs Handy. Würde gerne bei meiner Rolladensteuerung gewisse div's einblenden bzw. ausblenden abhängig davon, ob mein Switch on oder off ist.

Also wenn Switch "on" dann soll ein Slider angezeigt werden, wenn Switch "off" ein Textfeld.

Kann mir dabei jemand helfen wie ich das mit Javascript realisieren kann? Mir würde schon reichen wie man den Zustand des Switch abfragt.

MfG Darkon

[n4rrOx]

Hi,

dazu braucht man kein zusätzliches JS.
Schau dir mal das Widget Classchanger an: https://wiki.fhem.de/wiki/FTUI_Widget_Classchanger

Damit kannst du zwei verschiedene CSS Klassen in der -user.css je nach Zustand laden lassen.

Code Auswählen Erweitern


.da {
    visibility: visible;
}

.nichtda {
    visibility: hidden;
}



[darkon]

Super genial... Ich danke dir

[darkon]

Ich bin leider nicht in der Lage das realisieren 

Code Auswählen Erweitern

<div data-type="classchanger"
                                                                data-device="SUN_WZ_Rollo_Tuer_Hoch_Status"
                                                                data-get-on="an"
                                                                data-get-off="aus"
                                                                data-on-class="dasun"
                                                                data-off-class="datime"
                                                                class="big">

                                                                <div data-type="select"
                                                                       id="sunwzrollotuerhoch"
                                                                       data-device="SUN_WZ_Rollo_Tuer_Hoch"
                                                                       data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]'
                                                                </div>

                                                                <div data-type="datetimepicker"
                                                                       id="timewzrollotuerhoch"
                                                                       data-device="TIME_WZ_Rollo_Tuer_Hoch"
                                                                       data-set-value="$v"
                                                                       data-format="H:i"
                                                                       data-step="15"
                                                                       data-datepicker="false">
                                                                </div>
                                                       </div>

Code Auswählen Erweitern


.sunda {
        #sunwzrollotuerhoch {visibility: visible;}
        #timewzrollotuerhoch {visivility: hidden;}
}

.timeda {
        #sunwzrollotuerhoch {visibility: hidden;}
        #timewzrollotuerhoch {visivility: visible;}
}


Müsste das nicht funktionieren?

[n4rrOx]

Ich würde erstmal versuchen es relativ einfach zu beginnen .... d. h. nicht gleich klassen und id's zu mixen...ungetestet:

Code Auswählen Erweitern


<div data-type="classchanger"
                                                                data-device="SUN_WZ_Rollo_Tuer_Hoch_Status"
                                                                data-get-on="an"
                                                                data-get-off="aus"
                                                                data-on-class="da"
                                                                data-off-class="nichtda"
                                                                class="big">

                                                                <div data-type="select"
                                                                       id="sunwzrollotuerhoch"
                                                                       data-device="SUN_WZ_Rollo_Tuer_Hoch"
                                                                       data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]'
                                                                </div>
</div>
<div data-type="classchanger"
                                                                data-device="SUN_WZ_Rollo_Tuer_Hoch_Status"
                                                                data-get-on="an"
                                                                data-get-off="aus"
                                                                data-on-class="nichtda"
                                                                data-off-class="da"
                                                                class="big">

                                                                <div data-type="datetimepicker"
                                                                       id="timewzrollotuerhoch"
                                                                       data-device="TIME_WZ_Rollo_Tuer_Hoch"
                                                                       data-set-value="$v"
                                                                       data-format="H:i"
                                                                       data-step="15"
                                                                       data-datepicker="false">
                                                                </div>
</div>


.css:

Code Auswählen Erweitern


.da {
        visibility: visible;
}

.nichtda {
        visibility: hidden;
}


ggf. noch in den classchanger Widgets die on- und off-classes anpassen.

Gruß
Mathias

/btw:
Deine Klassenangaben in der classchanger und css Definition sind ebenfalls unterschiedlich:

Code Auswählen Erweitern


...
                                                               data-on-class="dasun"
                                                                data-off-class="datime"
...

Code Auswählen Erweitern


...
.sunda {
...
.timeda {
...