Question

我有几个单选按钮，每个按钮都与一个单独的div相关联。一旦用户选择了一个，其关联的div将被显示，问题是，一旦我选择了一个选项，如果我选择下一个选项就显示其div，则前一个div的样式不会被隐藏。

我认为要解决这个问题，我应该有一个单独的函数来在显示新的div之前隐藏所有div，但我想知道是否还有其他替代方法。

 $(document).ready(function() {
                $("input[name=options]:radio").change(function() {
                    alert($(this).val());
                 $('#' + $(this).val()).show();
                })
            });


   radio btns go here .... 
  <div id="1" style="display:none">
    ......
  </div>

  <div id="2" style="display:none">
    ....
  </div>

Answer 1

在显示目标表单之前隐藏表单，如

$(document).ready(function () {
    $("input[name=options]:radio").change(function () {
        $('form').hide();//you may have to improve this form selector if there are unrelated forms in the page
        $('#' + $(this).val()).show();
    })
});

由于div的使用没有任何方法对它们进行分组，因此为所有目标div添加一个新类，如

<div id="1" class="form-ct" style="display:none">......</div>
<div id="2" class="form-ct" style="display:none">......</div>

然后

$(document).ready(function () {
    $("input[name=options]:radio").change(function () {
        $('.form-ct').hide();//you may have to improve this form selector if there are unrelated forms in the page
        $('#' + $(this).val()).show();
    })
});

Answer 2

正如我在Arun的回答中所评论的那样......

$(document).ready(function() {
            $("input[name=options]:radio").change(function() {
                alert($(this).val());

             $("div.divToToggle").hide().filter('#' + $(this).val()).show();
            })
        });

radio btns go here .... 
<div id="1" class="divToToggle" style="display:none">
 ......
</div>

<div id="2" class="divToToggle" style="display:none">
 ....
</div>

如何在同一页面上显示和隐藏多个表单？

2 个答案: