JavaScript.JQuery 切换和淡入

Question

如果您有一个 div 和两个没有 id 的单选按钮，并且每个按钮都禁用内容并在选中时显示新内容。应该很简单，但它不能正常工作。当单选按钮更改时，关闭该内容并淡入新内容，反之亦然。 这段代码有什么问题？是不是很简单？

<div class="radios">
                <div class="change__radio">
                    Home: <input name="change" type="radio" value="1" checked="true" />
                    Projects <input name="change" type="radio" value="2" />
                </div> 



 $(":radio").change( function(e) {
            $(".radios__home").toggle().fadeIn(400);
            $(".radios__projects").toggle().fadeIn(400);});

Answer 1

您的问题是.fadeIn 总是使元素可见，无论您对.toggle 做什么。因此，您需要检查选中的收音机的值并使用它来淡入/隐藏适当的元素。像这样的东西（但希望更漂亮一点）：

$(":radio").change(function(e) {
  if ($(this).val() == 1) {
    $(".radios__home").fadeIn(400);
    $(".radios__projects").hide();
  } else {
    $(".radios__home").hide();
    $(".radios__projects").fadeIn(400);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radios">
  <div class="change__radio">
    Home: <input name="change" type="radio" value="1" checked="true" /> Projects <input name="change" type="radio" value="2" />All
  </div>



  <div class="radios__home" style="display:block">Home Radio</div>
  <div class="radios__projects" style="display:none">Projects Radio</div>

</div>