If / Else语句无法正常运行（Else语句将不会特别起作用）

Question

I am trying to create a script that manages the visibility of content based on whether a certain option is selected. The issue I am running into is that my if/else statement is not functioning properly.

It shows the div .provider-info when the last .radial-container radio button is checked (ie "I would like to keep my number").

It's supposed to slideUp when the class .select is removed from the parent container, but it doesn't.

I experimented a bit and was able to gain the functionality I was looking for with a different piece of code:

 $(function() {
  $('.radial-container').on('click', function() {
    $(this).addClass('select').siblings().removeClass('select');
    if($('.radial-container').last().hasClass('select')) {
      $(this).children('.provider-info').slideDown(300);
    } else {
      $('.provider-info').slideUp(300);
    }
  })
})

But the issue with the above segment is that it only works with Unlimited Line 2. Unlimited Line 1 essentially loses functionality.

How can I fix this code in order to get the if/else statement to function properly? I only want the div .provider-info to be visible when the 2nd radio button is selected.

Thanks,

-M

 $(function() { $('.radial-container').on('click', function() { $(this).addClass('select').siblings().removeClass('select'); if($('.radial-container').hasClass('select')) { $(this).children('.provider-info').slideDown(300); } else { $('.provider-info').slideUp(300); } }) }) 

 .phn-option-container { display:block; } .phn-unl { position:relative; margin:40px 0; } .phn-unl:after { content:''; display:block; position:relative; background:#e8e8e8; height:1px; top:30px; clear:both; } .radial-container { display:block; cursor: pointer; clear:both; } .phn-radio-container { margin:10px; clear:both; } .phn-unl > h4 { position:relative; left:10px; font-weight:600; color:#22ddc0; } .radial-container p { position:relative; float:left; left:25px; top:17px; color:#787878; } .radial-container.select .phn-radial .phn-center-dot { display:block; } .phn-radial { position:relative; float:left; height:35px; width:35px; padding:2px; margin:10px 0; border:5px solid #e8e8e8; border-radius:50%; left:10px; clear:both; cursor:pointer; } .phn-center-dot { display:none; position:relative; height:21px; width:21px; background-color:#E16E5B; border-radius:50%; } .provider-info label { color:#787878; margin:25px 0 0 60px; } .provider-info label span { position:relative; color:#E16E5B; top:-3px; } .provider-info input { background-color:transparent; border-width:0 0 2px; border-color:#787878; border-radius:0; margin-left:10px; width:270px; font-size:16px; } ::-webkit-input-placeholder { font-style: italic; } :-moz-placeholder { font-style: italic; } ::-moz-placeholder { font-style: italic; } :-ms-input-placeholder { font-style: italic; } .provider-info input:focus { border-color:#22ddc0; outline:0; } .provider-info { display:none; clear:both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div class="phn-option-container"> <div class="phn-unl" data-unl-line="1"> <h4>Unlimited Line 1</h4> <div class="radial-container select"> <div class="phn-radial"> <div class="phn-center-dot"></div> </div> <p>I would like a <strong>new</strong> number</p> </div> <div class="radial-container"> <div class="phn-radial"> <div class="phn-center-dot"></div> </div> <p>I would like to <strong>keep</strong> my number</p> <div class="provider-info"> <div> <label>Current Number: <span>*</span></label> <input type="text" placeholder="eg (555) 555-5555"/> </div> <div> <label>Current Provider: <span>*</span></label> <input type="text" placeholder="eg Verizon"/> </div> </div> </div> </div> <div class="phn-unl" data-unl-line="2"> <h4>Unlimited Line 2</h4> <div class="radial-container select"> <div class="phn-radial"> <div class="phn-center-dot"></div> </div> <p>I would like a <strong>new</strong> number</p> </div> <div class="radial-container"> <div class="phn-radial"> <div class="phn-center-dot"></div> </div> <p>I would like to <strong>keep</strong> my number</p> <div class="provider-info"> <div> <label>Current Number: <span>*</span></label> <input type="text" placeholder="eg (555) 555-5555"/> </div> <div> <label>Current Provider: <span>*</span></label> <input type="text" placeholder="eg Verizon"/> </div> </div> </div> </div> </div> 

Answer 1

do you want to use $(this).children in the else block as well?

 $(this).children('.provider-info').slideDown(300);
} else {
  $(this).children('.provider-info').slideUp(300);

Answer 2

This should do the job:

$('.radial-container').on('click', function() {
    $(this).addClass('select')
           .siblings('.radial-container')
           .removeClass('select')
           .find('.provider-info')
           .slideUp(300);
    $('.provider-info', this).slideDown(300);
});

Fixed Demo:

 $(function() { $('.radial-container').on('click', function() { $(this).addClass('select') .siblings('.radial-container') .removeClass('select') .find('.provider-info') .slideUp(300); $('.provider-info', this).slideDown(300); }); }); 

 .phn-option-container { display:block; } .phn-unl { position:relative; margin:40px 0; } .phn-unl:after { content:''; display:block; position:relative; background:#e8e8e8; height:1px; top:30px; clear:both; } .radial-container { display:block; cursor: pointer; clear:both; } .phn-radio-container { margin:10px; clear:both; } .phn-unl > h4 { position:relative; left:10px; font-weight:600; color:#22ddc0; } .radial-container p { position:relative; float:left; left:25px; top:17px; color:#787878; } .radial-container.select .phn-radial .phn-center-dot { display:block; } .phn-radial { position:relative; float:left; height:35px; width:35px; padding:2px; margin:10px 0; border:5px solid #e8e8e8; border-radius:50%; left:10px; clear:both; cursor:pointer; } .phn-center-dot { display:none; position:relative; height:21px; width:21px; background-color:#E16E5B; border-radius:50%; } .provider-info label { color:#787878; margin:25px 0 0 60px; } .provider-info label span { position:relative; color:#E16E5B; top:-3px; } .provider-info input { background-color:transparent; border-width:0 0 2px; border-color:#787878; border-radius:0; margin-left:10px; width:270px; font-size:16px; } ::-webkit-input-placeholder { font-style: italic; } :-moz-placeholder { font-style: italic; } ::-moz-placeholder { font-style: italic; } :-ms-input-placeholder { font-style: italic; } .provider-info input:focus { border-color:#22ddc0; outline:0; } .provider-info { display:none; clear:both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div class="phn-option-container"> <div class="phn-unl" data-unl-line="1"> <h4>Unlimited Line 1</h4> <div class="radial-container select"> <div class="phn-radial"> <div class="phn-center-dot"></div> </div> <p>I would like a <strong>new</strong> number</p> </div> <div class="radial-container"> <div class="phn-radial"> <div class="phn-center-dot"></div> </div> <p>I would like to <strong>keep</strong> my number</p> <div class="provider-info"> <div> <label>Current Number: <span>*</span></label> <input type="text" placeholder="eg (555) 555-5555"/> </div> <div> <label>Current Provider: <span>*</span></label> <input type="text" placeholder="eg Verizon"/> </div> </div> </div> </div> <div class="phn-unl" data-unl-line="2"> <h4>Unlimited Line 2</h4> <div class="radial-container select"> <div class="phn-radial"> <div class="phn-center-dot"></div> </div> <p>I would like a <strong>new</strong> number</p> </div> <div class="radial-container"> <div class="phn-radial"> <div class="phn-center-dot"></div> </div> <p>I would like to <strong>keep</strong> my number</p> <div class="provider-info"> <div> <label>Current Number: <span>*</span></label> <input type="text" placeholder="eg (555) 555-5555"/> </div> <div> <label>Current Provider: <span>*</span></label> <input type="text" placeholder="eg Verizon"/> </div> </div> </div> </div> </div>