If / Else語句無法正常運行（Else語句將不會特別起作用）

Question

我正在嘗試創建一個腳本，該腳本根據是否選擇了某個選項來管理內容的可見性。 我遇到的問題是我的if / else語句無法正常運行。

.radial-container中最后一個.radial-container單選按鈕時（即“我想保留我的電話號碼”），它將顯示div .radial-container .provider-info 。

它應該slideUp上課的時候.select從父容器中刪除，但事實並非如此。

我進行了一些試驗，並能夠使用另一段代碼獲得所需的功能：

 $(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);
    }
  })
})

但是上述段的問題在於它僅適用於Unlimited Line2。UnlimitedLine 1本質上失去了功能。

我如何解決此代碼，以使if / else語句正常運行？ 我只希望在選擇第二個單選按鈕時div .provider-info可見。

謝謝，

-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

您是否還要在else塊中使用$（this）.children？

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

Answer 2

這應該做的工作：

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

固定演示：

 $(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>