jquery - Jquery将隐藏的div加载到弹出的div中

Question

我有以下 django 代码循环遍历我的所有对象并创建一个我希望在弹出容器中显示的隐藏 div。

我的弹出容器运行良好，我只是不知道如何做三件事：

1. 我想隐藏容器中的任何内容
2. 然后我想将内容加载到容器中
3. 然后我想将内容的显示设置为在弹出窗口中加载后阻止

django代码

    {% for recipe in recipe_list %}
            <div class="recipe">
                <div class="button">
                      click me to load recipe content
                    </div>

            <div id="recipepopup" style="display:none;">
                       //content
            </div>
    {% endfor %}

    <div id = "popupdiv">
    <div id = "content_to_hide">
     //content to hide on recipepopup load
    </div>
    </div>

以及点击的Javascript：

<script type="text/javascript">
  $(document).ready(function(){
    $(".button").click(function(){
      // hide current content in popupdiv 
      // then load recipepopup then set display
      // of recipepopup to block  
    });
  });
</script>

Answer 1

$("#content_to_hide").hide();
var popup = $("#recipepopup");
$("#popupdiv").append(popup);
popup.show();

只需根据您的需要快速将它们组合在一起。应该进入按钮点击代码。

Answer 2

单线就可以了！

$("#popupdiv").children(':first').hide().end().append($('#recipepopup')).find('#recipepopup').css('display', 'block');