2016-06-03 6 views
0

Ich habe eine hervorragende Anleitung zum Stilisieren Radio-Buttons gefunden. Ich kann den CSS-Teil zum Laufen bringen, aber ich bin nicht stark in jquery/javascript. Ich versuche, den Effekt zu erzeugen, indem ich es in ein WordPress-Plugin verwandle. Jede Hilfe wird geschätzt.Stylize Radio Buttons mit jQuery (Wordpress)

Tutorial: http://www.jqueryscript.net/form/jQuery-Plugin-To-Turn-Radio-Buttons-Checkboxes-Into-Labels-zInput.html

Demo: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Turn-Radio-Buttons-Checkboxes-Into-Labels-zInput/

den jQuery-Code Hinzufügen scheint nicht für die Auswahl etwas zu ermöglichen. Ich weiß ein wenig und weiß, dass ich das $ zu jQuery ändern muss.

Vielen Dank im Voraus.

Antwort

0

Und obwohl ich stundenlang suchte, stolperte ich über eine Antwort, die funktionierte.

jQuery (document) .ready (function ($) {

$ ('input [type = "radio"], Etikett') addClass ('stilisierte.');

$('input').click(function() { 
    $('input:not(:checked)').parent().removeClass("active"); 
    $('input:checked').parent().addClass("active"); 
});  

});

Im Grunde genommen füge ich eine stilisierte Klasse hinzu, um die Schaltflächen und die aktive Klasse in nur die ausgewählten Elemente umzuwandeln. Vorher konnte ich den aktiven Teil machen, aber es würde nicht bei einem einzigen Radio-Button-Set bleiben.

Lösung von nandokakimoto: https://stackoverflow.com/posts/3376557/

Auf den ersten Klick, ein Element aus jeder ausgewählt ist, so dass eine Panne gibt.

Screenshot

+0

Und der letzte Code, der es alle arbeiten, ohne irgendwelche Nebenwirkungen gemacht: 'jQuery (document) .ready (function ($) { $ ('input [type = "radio" ], label '). addClass (' stilisiert '); $ (' input '). click (function() { $ (' input: not (: checked) '). übergeordnete(). removeClass ("active "); $ (this) .closes (" label "). AddClass (" active "); }); });' –