Jade/Pug Layout ändern, wenn Optionsfelder ausgewählt sind

Ich bin auf der Suche nach einem Weg, um das Layout meiner Website zwischen Optionen zu tauschen.Jade/Pug Layout ändern, wenn Optionsfelder ausgewählt sind

Ich habe diese Form jetzt, dass ich benutze:

form(action="/xxx" method="post") 

       .row 
        .col-lg-2.col-md-2.col-sm-4.col-xs-8 
         .input-group 
          select.form-control.text-center(name="selectOptionVat") 
           each taxRate in taxRates 
            option.text-center= taxRate 
          span.input-group-btn 
           button.btn.btn-success(type="submit") #{getText('Submit')}

Das Formular verwendet wird, alles in einer Tabelle zu aktualisieren.

Ich möchte ein weiteres Formular hinzufügen, das sichtbar wird, sobald der Benutzer auf ein Optionsfeld in der Tabelle klickt und dieses Formular dann ebenfalls ausblendet. So Swap zwischen den beiden von ihnen :-)

Ich weiß, dass ich dies in vielerlei Hinsicht tun könnten, aber wenn es möglich ist, ich habe verschiedene Gründe, dass ich wirklich wollen, es zu tun, nur durch Jade/Mops :-)

Auch wenn der Benutzer alle Radio-Buttons wieder deaktiviert, sollte das ursprüngliche Formular erneut angezeigt werden, und das andere wieder versteckt - aber ich denke, ich kann das selbst implementieren, falls jemand Hinweise darauf bekommt, wie das zu lösen ist .

Quelle

2016-08-11 Daniel

Bitte versuchen Sie zu implementieren und zu besonderen Problemen stecken, wenn fragen hier. Hinweis: Kurz gesagt, Sie haben definiert, was getan werden muss, implementieren Sie einfach diejenigen mit CSS-Klassen, die umgeschaltet werden können, um ausblenden anzuzeigen, und verwenden Sie Javascript onclick des Optionsfelds, um das Umschalten zu tun. –

Nun, ich habe versucht, es zu implementieren, aber habe keine Lösung gefunden. Ich denke, ich könnte es auf verschiedene Arten machen, aber aus verschiedenen Gründen bevorzuge ich es wirklich mit Jade/Mops alleine, wenn möglich :-) – Daniel

Von dem, was ich verstehe, ist Jade/Mops eine Templating-Engine, also kann es eine machen Zeitrichtiges Rendern basierend auf Ihrem Ausgangszustand, aber einmal im Browser gerendert, hat es keine Kontrolle über dynamische Änderungen. Sie müssen Javascript dafür verwenden. Wenn ich nicht falsch liege, findet Jade-Kompilierung serverseitig statt. –

Ich löste das Problem mit JavaScript (und jQuery) wie vorgeschlagen. Die Lösung ist nicht so kurz, wie ich gehofft habe, aber hier ist es, falls es jemand anderem hilft.

https://jsfiddle.net/ushdo9cu/

$('body').on('mouseup', 'input[type="radio"]', function() { 
var radio = $(this); 
uncheck_radio_before_click(radio); });

Quelle

2016-08-11 11:16:56 Daniel

Jade/Pug Layout ändern, wenn Optionsfelder ausgewählt sind

Antwort

Verwandte Themen