有關內容的fadeIn / fadeOut效果的簡單jQuery故障

Question

場景：我有一個帶有2個單選按鈕和兩個子窗體的問題： subformA和subformB

當用戶檢查第一個單選按鈕子窗體A應該淡入時，否則，如果他檢查第二個單選按鈕子subformB應該淡入。

問題：我已經完成了代碼，但是問題是，當用戶選中第一個單選按鈕時，subformA將會出現；如果萬一他改變主意並單擊另一個選項而不是以前的選項，那么它將出現。 subformB被連接到subformA。

請求：我希望使這些表單互斥（如果用戶重新選擇單選按鈕，則不會出現串聯效果）。 這是我無法注意到的小事情。 謝謝！

我的js代碼 ：

<!-- script for the Div -->
<script type="text/javascript" >
$(document).ready(function() {
$('#subafform').hide();
 $("#element_4_1").click( function(){
    if( $(this).is(':checked')) {
           $('#subafform').fadeIn();
    } else {
        $('#subafform').fadeOut();
    }
    });
    });

</script>

代碼的其他部分：

<script type="text/javascript" >
$(document).ready(function() {
$('#subbform').hide();
 $("#element_4_2").click( function(){
    if( $(this).is(':checked')) {
           $('#subbform').fadeIn();
    } else {
        $('#subbform').fadeOut();
    }
    });
    });

</script>




 <li id="li_4" >
  <label class="description" for="element_4">Are you affiliated with Company? </label>
  <span>
   <input id="element_4_1" name="element_4" class="element radio required" type="radio" value="1" />
   <label class="choice" for="element_4_1">Yes</label>
   <input id="element_4_2" name="element_4" class="element radio required" type="radio" value="2" />
   <label class="choice" for="element_4_2">No</label>

  </span> 
  </li> 






<li id="subafform">
  <ul>
  <li id="li_5_1" >
  <label class="description" for="element_5_1">Department/College </label>
  <div>
   <input id="element_5_1" name="element_5_1" class="element text medium" type="text" maxlength="255" value=""/> 
  </div> 
  </li>  <li id="li_5_2" >
  <label class="description" for="element_5_2">Department Chair </label>
  <div>
   <input id="element_5_2" name="element_5_2" class="element text medium" type="text" maxlength="255" value=""/> 
  </div> 
  </li>  



</li>



<li id="subbform>

........

....

</li>

Answer 1

DOM示例：

<form class="subform" id="subforma">
    <button>Form A</button>
</form>

<form class="subform" id="subformb">
    <button>Form B</button>
</form>

<form id="switcher">
    <input type="radio" name="show_form" value="subforma"> Show Form A<br />
    <input type="radio" name="show_form" value="subformb"> Show Form B<br />
</form>

示例JQuery：

$('input[name="show_form"]').click(function(){
    var form_id = this.value;
    $('.subform:visible').fadeOut();
    $('#' + form_id).fadeIn();
});

CSS示例：

.subform {
    display:none;
    position:absolute;
    top:0;
    left:0;
}

#switcher {
    position:relative;
    top:100px;
}

演示：

http://jsfiddle.net/AlienWebguy/hFax3/

Answer 2

您正在做的是檢查是否單擊了單個單選按鈕，然后檢查是否已選擇它。 好吧，既然用戶單擊了單選按鈕，那么它肯定會被選中。

您需要做的是刪除該if語句，並保留它，以便在單擊按鈕A時淡入subformA和subformB。 如果jQuery很聰明（我懷疑...），它不會淡出subformB（如果它已經淡出），所以沒有問題。

同樣，當單擊按鈕B時，淡入subformB並淡出subformA。

Answer 3

如果有人單擊並選中了單選按鈕，它將保持選中狀態。 因此，您的if else陳述並沒有真正對您有任何好處。 我要做的就是單擊A時窗體B總是淡出，而單擊B時窗體A總是淡出。像這樣的簡單東西：

$("#element_4_1").click(function() {
    $('#subafform').fadeIn();
    $('#subbfform').fadeOut();
}