変更の際のラジオボタンと、ドキュメントがjQueryでいつ用意されているかを聞きますか？

Question

私が必要とするように、両方の私はどこにでも探していないことだし、私はラジオボタンのリスナーを作成する方法や、それがreadyにチェックしていますかどうかを確認する方法を見つけることができますが、決して：

私は、フォーム内のオブジェクトを編集する場合、依存ラジオ・グループで選択されたものについては、divが表示または非表示になっている必要があります。ユーザーがそれを変更すると、再び表示されるか消えます。

私はdivにサーバー側で隠さクラスを追加することによって、正しい状態を初期化することができたが、その後、私はAJAXを使用していないので、PHPとjQueryの中のすべての私の依存関係をプログラムしなければならない - それはしていません私には意味をなさない

私はベストプラクティスのためにjQueryウェブサイトを見ました - それはthisのようでした。
しかし私は私のケースでそれをどうすればいいのか分かりません。$(this)は動作していないように見えます。私はイベント外の関数を参照しているからですか？

var fieldHider = function (turnOn, toggleFields, fadeIn) { 
 
    var visibilityAction; 
 
    if (turnOn) { 
 
     visibilityAction = (fadeIn) ? "fadeIn" : "show"; 
 
    } else { 
 
     visibilityAction = (fadeIn) ? "fadeOut" : "hide"; 
 
    } 
 
    $(toggleFields)[visibilityAction](); 
 
}; 
 

 
var translatorRadioChanged = function (event) { 
 
    var isOn = ($(this).val() === '1'); 
 
    var fading = (event) ? true : false; 
 
    fieldHider(isOn,'label[for="translator"]', fading); 
 
}; 
 

 
var translatorRadioNames = "translatorNeeded"; 
 

 
$(function() { 
 
    $("input[name='" + translatorRadioNames + "']").change(translatorRadioChanged); 
 
    translatorRadioChanged(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label for="translatorNeeded"> 
 
Translator needed 
 
<input type="radio" value="1" name="translatorNeeded"> 
 
Yes 
 
<input type="radio" value="0" checked="checked" name="translatorNeeded"> 
 
No -> Div below should be hidden! 
 
</label> 
 
<br> 
 
<br> 
 
<label for="translator"> 
 
<label class="lcapp-label clearfix" for="translator"> 
 
Translator Name + Language 
 
<input type="text" name="name" size="5"> 
 
<input type="text" name="lang" size="5"> 
 
</label> 
 
</label>

Answer 1

あなたは、2つの異なるコンテキストでの関数を呼び出しています。

だけマッチングに変更イベントをトリガしてくださいは、入力ページのロード時にチェックし、変更リスナーが

$("input[name='" + translatorRadioNames + "']") 
     // assign event listener 
     .change(translatorRadioChanged) 
     // trigger the event on checked one if it exists 
     .filter(':checked').change(); 

に

変更

$("input[name='" + translatorRadioNames + "']").change(translatorRadioChanged); 
translatorRadioChanged(); 

が割り当てられた後、今の機能は次のようになりますイベントハンドラのコンテキストで呼び出され、this

の正しいコンテキストを持ちます

Answer 2

thisreadyは、windowです。それは:checkedラジオの値を探すために

変更： -

var fieldHider = function (turnOn, toggleFields, fadeIn) { 
 
    var visibilityAction; 
 
    if (turnOn) { 
 
     visibilityAction = (fadeIn) ? "fadeIn" : "show"; 
 
    } else { 
 
     visibilityAction = (fadeIn) ? "fadeOut" : "hide"; 
 
    } 
 
    $(toggleFields)[visibilityAction](); 
 
}; 
 

 
var translatorRadioChanged = function (event) { 
 
    var isOn = ($("input[name='" + translatorRadioNames + "']:checked").val() === '1'); 
 
    var fading = (event) ? true : false; 
 
    fieldHider(isOn,'label[for="translator"]', fading); 
 
}; 
 

 
var translatorRadioNames = "translatorNeeded"; 
 

 
$(function() { 
 
    $("input[name='" + translatorRadioNames + "']").change(translatorRadioChanged); 
 
    translatorRadioChanged(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label for="translatorNeeded"> 
 
Translator needed 
 
<input type="radio" value="1" name="translatorNeeded"> 
 
Yes 
 
<input type="radio" value="0" checked="checked" name="translatorNeeded"> 
 
No -> Div below should be hidden! 
 
</label> 
 
<br> 
 
<br> 
 
<label for="translator"> 
 
<label class="lcapp-label clearfix" for="translator"> 
 
Translator Name + Language 
 
<input type="text" name="name" size="5"> 
 
<input type="text" name="lang" size="5"> 
 
</label> 
 
</label>