Question

我确定我以前见过某些例子，但我似乎无法找到它们。我有一个有5个按钮的页面。我希望每个按钮加载一个不同的形式，而不刷新。我可以使用UpdatePanels，但这听起来有点过分（而且带宽成本很高）。我想一次性加载所有表单，因此单击按钮基本上隐藏/显示相关表单。我无法使用html()方法（原样）执行此操作，因为表单可能非常复杂并且包含回发到服务器的ASP.NET控件。相反，我已将表单放在单独的divs中。

我尝试过这样的事情：

                case "button1":

                    $(".current_form").show();
                    $("#divForm1").prependTo($('.current_form'));
                    break;

                case "button2":

                    $(".current_form").show();
                    $("#divForm2").prependTo($('.current_form'));
                    break;

问题在于旧形式始终存在，而不是被替换。是否可以在JQuery中将div附加到给定容器中？还是有另一种方法可能会更好吗？

感谢您的帮助

完整代码

<script type="text/javascript">
    $(document).ready(function() {

        $("button").button();
        $("button").click(function() {

            switch ($(this).attr("value")) {
                case "button1":

                    $('.current_form').empty().show();
                    $("#divForm1").clone().prependTo($('.current_form'));
                    break;

                case "button2":

                    $('.current_form').empty().show();

                    $("#divForm2").clone().prependTo($('.current_form'));
                    break;




            }
            return false; //prevent postback
        });



    });

</script>

我正在测试这些div：

<div class="current_form">
<div id="divForm1" >

 This is div 1

</div>
</div>


<div class="current_form">
<div id="divForm2" >

  This is div 2

</div>
</div>

Answer 1

您可以这样称呼它：

$('.current_form').empty().show();
$("#divForm1").clone().prependTo($('.current_form'));

你的标记会是这样的：

<!-- Possible <form> tag here -->
<div class="current_form"></div>
<!-- Possible </form> tag here -->
<div id="divForm1">
 This is div 1
</div>
<div id="divForm2">
  This is div 2
</div>

之前清除了表单，并创建了一个副本，您希望将其添加到.current_form中，这意味着原始文件仍然保留，您的按钮不会第一次使用后停止工作。

请务必在提交的表单之外放置<div id="divFormXX">个元素，这样原始值中的值也不会提交给服务器。

更新：更好的选择，更少的标记和更少的javascript :) 加价：

<div id="divForm1" class="form" style="display: block;">
 This is div 1
</div>
<div id="divForm2" class="form">
  This is div 2
</div>

使用Javascript：

$(function() {
  $("button").button().click(function() {
    $(".form").hide();
    $("#divForm" + $(this).attr("value").replace('button','')).show();
    return false;
  });
});

CSS：

.form { display: none; } //Hide the forms initially

JQuery - 添加/删除表单和div

1 个答案: