변경 사항이있는 라디오 단추와 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 + "']").change(translatorRadioChanged); 
translatorRadioChanged(); 

으로

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

지금 함수가있을 때

그냥 일치에 변경 이벤트를 트리거보십시오 것은 입력을 확인 이벤트 처리기의 컨텍스트에서 호출되며 this

에 대한 올바른 컨텍스트를 갖습니다.

Answer 2

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