it-swarm.com.de

RSForm Pro ändert die Klasse der Radiogruppenbezeichnung

Ich richte ein RSForm ein! Pro Form mit Optionsfeldern, aber ich möchte die Eingabe der Optionsfelder verbergen und die Bezeichnung für die Auswahl verwenden. Der HTML-Code für die Frage lautet:

<div class="rsform-block rsform-block-question">
    <div class="formControlLabel">This is the question...?</div>
    <div class="formControls">
        <div class="formBody">
            <p class="rsformVerticalClear">
                <input type="radio" id="Question0" value="First Answer" name="form[Question]">
                <label for="Question0">First Answer</label>
            </p>

            <p class="rsformVerticalClear">
                <input type="radio" id="Question1" value="Second Answer" name="form[Question]">
                <label for="Question1">Second Answer</label>
            </p>

            <p class="rsformVerticalClear">
                <input type="radio" id="Question2" value="Third Answer" name="form[Question]">
                <label for="Question2">Third Answer</label>
            </p>
        </div>
    </div>
</div>

Kann ich das überhaupt mit jQuery machen?

Über CSS möchte ich den Hintergrund der ausgewählten Beschriftung ändern (wenn ich darauf klicke). Das Optionsfeld für die Eingabe ändert sich, aber ich kann nicht herausfinden, wie die Beschriftung in Aktiv/Fokus geändert wird.

Ich denke, das Folgende sollte funktionieren, aber es scheint nicht zu funktionieren, da dem Label keine Klasse zugeordnet ist.

$("input:radio[name='form[Question]']").change(function(){
    $("label").removeClass("selected");
    $("label[for='" + this.id + "']").toggleClass("selected", this.checked);
});

Irgendwelche Ideen bitte?

2
RustyJoomla

Stellen Sie zunächst sicher, dass die jQuery-Bibliothek geladen wird. Überprüfen Sie den gerenderten Kopf mit den Browser-Entwicklertools und stellen Sie sicher, dass er geladen wird. Andernfalls müssen Sie entweder von Ihrer Vorlage laden oder eine Vorlagenüberschreibung für die Komponentenansicht ausführen, die das betreffende Seitenrendering verarbeitet. In beiden Fällen müssen Sie oben Folgendes hinzufügen.

JHtml::_('jquery.framework');

Ich habe das folgende Code-Snippet bearbeitet, in ein IIFE eingebettet und das jQuery-Objekt als $ an die Funktion übergeben. Der Grund, warum wir dies tun müssen, ist, dass Joomla immer noch Mootools verwendet, obwohl es ausläuft, was auch das $ verwendet, um auf Bibliotheksmethoden zuzugreifen. Dieser Konflikt erfordert entweder die Verwendung eines IIFE oder die Verwendung von jQuery im noConflict () -Modus.

Das Referenzieren des angeklickten Ziels in Ihrer Rückruffunktion, um die Bezeichnung zu finden und die Klasse umzuschalten, sollte dies für Sie lösen.

(function($) {
    $(document).ready(function(){
        $('input:radio[name="form[Question]"]').change(function(){
            console.log('Change event callback fired!');
            $(this).next().toggleClass("selected", $(this).prop("checked"));
        });
    });
})(jQuery);

Außerdem wurde das Qualifikationsmerkmal von this.checked in $ (this) .prop ("checked") geändert. Ein häufiger Fehler ist die Annahme, dass native JavaScript-Objekteigenschaften und -Methoden in jQuery-Objekten desselben Elements verfügbar sind.

Ich habe die Antwort so bearbeitet, dass sie die Umbruchfunktion in der document ready-Methode von jQuery widerspiegelt, um sicherzustellen, dass das DOM vollständig geladen ist.

2
Brian Bolli