关于内容的fadeIn/fadeOut效果的简单jQuery故障

simple jQuery glitch regarding fadeIn/fadeOut effects for content

本文关键字：简单 jQuery 故障 fadeOut 于内容 fadeIn      更新时间：2023-09-26

场景：我有一个问题，它有两个单选按钮&两个子型：subformA和subformB

当用户检查第一个单选按钮子窗体A应该变淡In时，或者当他检查第二个单选按钮subformB应该变淡IN时。

问题：我已经完成了代码，但问题是当用户检查第一个单选按钮时，子窗体A将出现&如果出现这种情况，他会改变主意，点击另一个选项而不是前一个。子形式B被连接到子形式A。

请求：我想使这些表单相互排斥（如果用户重新选择单选按钮，则不会产生串联效果）。这是一件我无法注意到的小事。谢谢

我的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>

示例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/

如果有人单击并已选中单选按钮，它将保持选中状态。所以你的if-else语句对你没有任何好处。我想做的是让表格B在你点击A时总是淡出，而表格A在你点击B时总是淡出

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

您要做的是检查是否单击了单个单选按钮，然后检查它是否被选中。好吧，由于用户点击了一个单选按钮，它当然会被选中。

您需要做的是删除if语句，并将其保留，以便在单击按钮A时，淡入子窗体A并淡出子窗体B。如果jQuery很聪明（我对此表示怀疑…），那么如果它已经淡出，它就不会淡出subformB，所以没有问题。

类似地，当单击按钮B时，淡入子窗体B并淡出子窗体A。

相关文章：