JS에서 jQuery로 간단한 코드를 변환하십시오.

Question

저는 JS와 jQuery (내가 알고있는 시대의 뒤편에서)에 새로 왔지만, jQuery로 변환하고 싶은 매우 간단한 JS 함수를 가지고 있습니다. 이 문제에 대한 도움을받을 수 있다면 jQuery의 메커니즘을 이해하는 데 도움이 될 것입니다 (JS를 이해함에 따라).

이 기능은 라디오 버튼 한 쌍이 선택되었는지 여부에 따라 div를 표시하거나 숨기고 있습니다. 예 또는 아니오. 내가 뭘하고 싶은지 (로드시) 예가 선택되면 div를 밀어 넣고 No를 선택하면 밖으로 나간다. 기본값이 아니길 바래요 (지금은 예입니다). 슬라이드에 jQueryUI가 실행 중입니다.

<script type="text/javascript"> 
function makeChoice() 
{ 
    if (document.form1.mobileyesno[1].checked == true) 
     { 
      document.getElementById('wanttexts').style.visibility = 'hidden'; 
     } 
    else 
     { 
      document.getElementById('wanttexts').style.visibility = 'visible';   
     } 
} 

</script> 

나는이 아마 초등학교 알고하지만 난 도움이 필요 :

다음은 JS 코드입니다. :-) 감사! 더 나은 아직

Answer 1

$(function() { 
    if ($('input[name="mobileyesno"]:checked').val() == 'Yes') { 
     $('#wanttexts').show(); 
    } else { 
     $('#wanttexts').hide(); 
    } 
); 

외부 $(function() { });는 페이지로드가 완료되면 중괄호의 코드가 실행된다는 것을 의미합니다. $('input[name="mobileyesno"]:checked')은 "mobileyesno"라는 이름을 갖고 현재 확인 된 모든 입력 필드를 선택하는 방법이며 val()은 해당 입력 필드의 값을 추출합니다. 페이지가로드 될 때 기본적으로 특정 입력 필드를 선택하려면 해당 라디오 버튼의 입력 태그에 checked="checked" 속성을 추가하십시오.

Answer 2

function makeChoice() { 
    $('#wanttexts').css(
     'visibility', 
     document.form1.mobileyesno[1].checked ? 'hidden' : 'visible' 
    ); 
} 

편집 :

function makeChoice() { 
    $('#wanttexts') 
     [document.form1.mobileyesno[1].checked ? 'slideDown' : 'slideUp'](); 
} 

Answer 3

당신은 당신이

function makeChoice() 
{ 
    if (document.form1.mobileyesno[1].checked == true) 
     { 
      $('#wanttexts').slideDown(); 
     } 
    else 
     { 
      $('#wanttexts').slideUp();   
     } 
} 

Answer 4

function makeChoice() 
{ 
    if(document.form1.mobileyesno[1].checked) 
     $("#wanttexts").hide(); 
    else 
     $("#wanttexts").show(); 
} 

Answer 5

나는 이런 식으로 뭔가에 대해 생각했다 시도 할 수 jQuery를 사용하는 경우 :

jQuery(function($){ 
    function toggle() { 
     $('#wanttexts').toggle( 
      $('[name=mobileyesno]:eq(0):checked').length == 1 
     ); 
    } 
}); 

을

http://api.jquery.com/toggle/

Answer 6

글쎄, 나는 당신에게 그것을 변환하는 몇 가지 코드를 줄 수는 있지만, 실제로 도움이되지는 않을 것이다. ;) 다음은 그 함수의 내용을 구체적으로 바꾸기 시작하는 몇 가지 링크입니다. jQuery 문서는 사실 실제로 훌륭합니다 (대부분).

• Selectors, 구체적 ID Selector. 이것이 실제로 특정 세트를 참조하는 방법입니다.

• CSS 이것은 요소의 CSS를 변경하는 데 사용하는 기능입니다. change things in the DOM에 대한 자세한 내용은 다음 섹션을 참조하십시오.

• 확인한 경우 .prop()을 사용해야합니다. 실제로는 그와 .attr의 차이에 대한 최근의 대변동이 있지만 너무 많이 걱정하지 마십시오.

• 로드 할 때 무언가를하려면 .ready()을 봐야합니다. 이 같은 전체 문서한다는 점에서 기능을 전달할 수 있습니다

---

$(document).ready(function() { 
    //stuff to do on load 
}); 

• 표시하거나 jQuery를에 물건을 숨기려면, 실제로 .show() 및 .hide() 같은 몇 가지 편의 기능을 가지고 있지만, 당신은 할 수 슬라이딩 및 페이딩과 같은 더 많은 것들을 보려면 effects을보십시오. 꽤 산뜻한 재료.

jQuery에 대해 알아야 할 몇 가지 사항이 있습니다. 예를 들어 사물 등을 연결할 수있는 것입니다.this과 같은 입문 문서를 살펴 보는 것도 가치가 있습니다.

Answer 7

당신이 slid 효과를 원하는 경우에 당신이 할 수 있습니다 : 그렇지 않으면

$('#mobileyesno').checked(function() { 
    $('#wanttexts').slideToggle(); 
}); 

:

$('#mobileyesno').checked(function() { 
    $('#wanttexts').toggle(); 
}); 

Answer 8

$(function() { 
    $("#mobileyesno").bind("click", function() { 
     $("#wanttexts").css("visibility", ($("#mobileyesno").eq(1).is(":checked") ? "hidden" : "visible")); 
    }); 
}); 

.hide()와 .show() 디스플레이 요소를 설정합니다 : 없음/차단 - OP의 코드가하는 것이 아닙니다.