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

我有下面的django代码，它在我的所有对象上循环，并创建一个隐藏的div，我希望在弹出式容器中显示它

我的弹出式容器工作得很好，我只是不知道如何做三件事：

我想隐藏容器中的任何内容

然后我想将内容加载到容器中

然后，我想将内容的显示设置为块显示 在弹出窗口中加载

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>

{配方列表%中配方的%
单击我加载配方内容
//内容
{%endfor%}
//RecipePup加载时要隐藏的内容

和用于单击的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>

$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{
//在popupdiv中隐藏当前内容
//然后加载RecipePup，然后设置显示
//RecipePop到块的连接
});
});

---

只要根据你的需要快速地把它们组合起来就行了。应该在按钮中点击代码。

一行代码就可以了

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

---

如果您将django替换为真正的人类可读HTML，这会更容易些？您已经在伪代码中考虑了所有内容。。。我强烈建议您从jquery文档（）中学习如何自己做事情，而不是询问其他人如何做。@katiebekell，

在那篇文章中没有关闭，请检查这是否是一个拼写错误或文档中的真实问题。这只是一个拼写错误谢谢zuul

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