라디오 버튼에 대한 코드를 최적화하는 데 도움이 필요합니다

Question

위의 코드는 2 개의 라디오 버튼을 클릭 할 때 2 div의 값을 표시하거나 숨 깁니다. 나는 jquery에 익숙하지 않기 때문에이 동일한 기능을 작성하는 더 좋은 방법이 있는지 알고 싶습니다. 당신이 두 번째 if을 줄일 수에 대해 걱정하고 else

$('input[type="radio"]').change(function(){ 
    if ($('#subscribe').is(':checked')){ 
     $("#subNow").show(); 
     $('#oneTime').hide(); 
    } 
    else{ 
     $('#oneTime').show(); 
     $("#subNow").hide(); 
    } 
}); 

을 배치하는 다른 국가가없는 경우

Answer 1

또한이 나는 것 정확히 방법입니다 switch

Answer 2

사용할 수 있습니다 이 작업을 수행. 유일한 다른 옵션은 라디오 버튼의 가치를 얻는 것이지만, 본질적으로 당신이 이미 가지고있는 것과 똑같은 것을 할 것입니다. 당신은 설치 초기 상태는, #subNow { display: none; } 말을 한 후 바로 .toggle() 방법을 사용하는 경우

Answer 3

, 어떤 조건

$('input[type="radio"]').change(function(){ 
 
    $("#subNow").toggle(); 
 
    $('#oneTime').toggle(); 
 
});

#subNow { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type='radio' name='rd' checked />1 
 
<input type='radio' name='rd' />2 
 
<br /> 
 
<div id="subNow">subNow</div> 
 
<div id="oneTime">oneTime</div>

또한

,

... 무엇을 그리 이제까지 확인되지

마크 업을 따라 가면 JS를 떨어 뜨리고 CSS 전용으로 이동하는 이유는 무엇입니까 ??

input[type="radio"]:nth-child(2):checked ~ #oneTime, 
 
#subNow 
 
{ 
 
    display: none; 
 
} 
 

 
input[type="radio"]:nth-child(2):checked ~ #subNow{ 
 
    display: block; 
 
}

<input type='radio' name='rd' checked />1 
 
<input type='radio' name='rd' />2 
 
<br /> 
 
<div id="subNow">subNow</div> 
 
<div id="oneTime">oneTime</div>

Answer 4

한 가지 방법은 일반적인 클래스를 사용하는 데이터는 또한 사용하여 순수 CSS의 솔루션이

$(".rads").on("change", '[type="radio"]', function (e) { 
 
     var show = $(this).data("show"); 
 
     $(".details").hide().filter(show).show(); 
 
    });

.details { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="rads"> 
 
     <input type="radio" id="x" name="rad" data-show=".foo" /> 
 
     <label for="x">A</label> 
 
     <input type="radio" id="y" name="rad" data-show=".bar" /> 
 
     <label for="y">B</label> 
 
    </div> 
 
    <div class="foo details">Apple</div> 
 
    <div class="bar details">Bacon</div>

속성 : 선택 선택합니다.