it-swarm-eu.dev

RSForm Pro modifica la classe dell'etichetta Radio Group

Sto installando un RSForm! Modulo pro utilizzando i pulsanti di opzione, ma voglio nascondere l'ingresso dei pulsanti di opzione e utilizzare l'etichetta per la selezione, l'HTML per la domanda è:

<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>

Posso comunque farlo con jQuery?

Tramite CSS, voglio cambiare lo sfondo dell'etichetta selezionata (quando si fa clic su), il pulsante di opzione di input cambia, ma non riesco a capire come cambiare l'etichetta in attivo/attivo.

Penso che dovrebbe funzionare quanto segue, ma non sembra, poiché l'etichetta non ha una classe associata.

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

Qualche idea per favore?

2
RustyJoomla

Innanzitutto, assicurarsi che la libreria jQuery sia in fase di caricamento. Utilizzando gli strumenti di sviluppo del browser, ispezionare la testa renderizzata e verificare che sia caricata. In caso contrario, dovrai caricare dal tuo modello o eseguendo una sostituzione del modello per la vista componente gestendo il rendering della pagina in questione. Ad ogni modo, dovrai aggiungere quanto segue all'inizio.

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

Ho modificato lo snippet di codice di seguito, inserendo un IIFE, passando l'oggetto jQuery alla funzione come $. Il motivo per cui dobbiamo fare questo è che Joomla sta ancora usando Mootools, anche se viene gradualmente eliminato, che utilizza anche $ per accedere ai metodi della libreria. Questo conflitto richiede l'uso di un IIFE o l'uso di jQuery in modalità noConflict ().

Fare riferimento al target cliccato nella funzione di callback per trovare l'etichetta e attivare/disattivare la classe dovrebbe risolverlo per te.

(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);

Anche modificato il qualificatore da this.checked a $ (this) .prop ("controllato"). Un errore comune è assumere proprietà e metodi degli oggetti JavaScript nativi disponibili negli oggetti jQuery dello stesso elemento.

Ho modificato la risposta per riflettere la funzione di wrapping all'interno del metodo pronto per i documenti di jQuery per garantire che il DOM sia completamente caricato.

2
Brian Bolli