web-dev-qa-db-ja.com

RSForm ProがRadio Groupラベルのクラスを変更

RSFormをセットアップしています！ラジオボタンを使用するプロフォームですが、ラジオボタンの入力を非表示にして、選択にラベルを使用したいのですが、質問のHTMLは次のとおりです。

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

とにかくjQueryでこれを行うことができますか？

CSSを使用して、選択したラベルの背景（クリックすると）を変更したいのですが、入力ラジオボタンが変わりますが、ラベルをアクティブ/フォーカスに変更する方法を理解できません。

以下はうまくいくと思いますが、ラベルにクラスが関連付けられていないため、うまくいきません。

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

何かアイデアはありますか？

joomla-3.3.xjqueryjavascriptrsform
2
RustyJoomla

まず、jQueryライブラリがロードされていることを確認してください。ブラウザー開発者ツールを使用して、レンダリングされたヘッドを検査し、ロードされていることを確認します。そうでない場合は、テンプレートからロードするか、問題のページレンダリングを処理するコンポーネントビューに対してテンプレートのオーバーライドを実行する必要があります。どちらの場合も、次のものを上部に追加する必要があります。

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

以下のコードスニペットを編集して、IIFEでラップし、jQueryオブジェクトを$として関数に渡しました。これを行う必要があるのは、Joomlaが引き続きMootoolsを使用しているためです。ただし、段階的に廃止され、ライブラリメソッドへのアクセスにも$を使用しています。この競合には、IIFEを使用するか、jQueryをnoConflict（）モードで使用する必要があります。

ラベルを見つけてクラスを切り替えるためにコールバック関数でクリックされたターゲットを参照すると、これが解決されます。

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

また、修飾子をthis.checkedから$（this）.prop（ "checked"）に変更しました。よくある間違いは、ネイティブJavaScriptオブジェクトのプロパティとメソッドが同じ要素のjQueryオブジェクトで使用できると想定することです。

答えを編集して、jQueryのdocument readyメソッド内のラッピング関数を反映し、DOMが完全に読み込まれるようにしました。

2
Brian Bolli