使用 jquery 加载和重用内容

Question

我是 JQuery 新手，需要一些指导。

我创建了一个带有几个按钮的页面。当我单击其中一个按钮时，新内容将被加载并放入一个 div 中。按钮始终保持可见。

当我单击另一个按钮时，会从服务器加载一些其他内容，并在清空它后将其放入同一个 div 中。

在按钮的内容之一中，我有一个“幻灯片”。当我在内容之间切换几次时，动画就会损坏。我认为我遇到的问题是我每次都重新加载内容并将其再次添加到同一个 div 中。无论如何，这不是一个好方法，我应该以某种方式重用这些内容。

我的问题是：

1. 如何从服务器加载内容并以某种方式将其存储在客户端中
2. 检查内容是否已加载已经
3. 再次从服务器加载内容
4. 在下次应显示时重用内容，而不是 以任何方式重叠内容

我的脚本：

 $(document).ready(function() {
            $("#section2").load("main_mid.php"); 
              $("#taylor_made").click(function () {
                $("#section2").empty();
                $("#section2").load("taylor_made.php"); 
                });

            $("#sm_tool").click(function () {
                $("#section2").empty();
                $("#section2").load("main_mid.php"); 
                });
         });

我的按钮：

 <div class="buttons_menu">
        <button id="sm_tool" class="big_buttons" type="button"><img src="sm_tool_button.png" alt="Angry face" /></button>
        <button id="taylor_made" class="big_buttons" type="button"><img src="taylor_made_button.png" alt="Angry face" /></button>
  </div>

添加内容的区域：

<div id="section2">

</div>

在上面的示例中，我稍微简化了世界。实际上，会有几个（10-15）个按钮与不同的内容相关联。一次加载所有内容可能会有点多。我正在更新我的问题。它实际上是一个普通的网页，其中的菜单由按钮和链接组成。

还要注意的是，一些页面包含图像，一些页面包含某种动态内容（例如，幻灯片加载并在加载内容时使用脚本启动动画）。

提前致谢！

Answer 1

也许这可以解决您的一些问题：

创建两个内容 div，例如“section2_sm_tool”和“section2_taylor_made”，其中之一的样式为“display:none”。

在文档准备就绪后，将 main_mid.php 和 taylor_made.php 加载到各自的容器中，就像您已经对 main_mid.php 所做的那样。

然后，单击每个按钮时，只需 .hide() 一个 div 并 .show() 另一个 div，而不是重新加载内容。

此方法假设用户单击这两个按钮时内容不会更改。

Answer 2

这就是我在ilia choly的帮助下解决这个问题的方法：

var price_page; 
$("#prices").click(function () {
                if(price_page==null){
                    $("#section2").load("prices.php", function(data) {
                        price_page = data;                  
                    }); 
                }

                $("#section2").removeClass();
                $("#section2").addClass("price_mid_area");
                $("#section2").empty();
                $("#section2").html(price_page);

            });

价格是按钮的ID。

使用 .removeClass 和 .addClass，我也可以更改不同页面的 css 属性。

Answer 3

要么使用查询的数据 api。 http://api.jquery.com/jQuery.data/ 或者将内容加载到2中单独的 div 并使用 .hide() .show() 切换它们

var price_page = null; 
$("#prices").click(function () {
    if(price_page==null){
        $("#section2").load("prices.php", function(data) {
            price_page = data;
            $("#section2").removeAttr("class").addClass("price_mid_area");
        }); 
    }else{
        $("#section2").html(price_page).removeAttr("class").addClass("price_mid_area");
    }
});

Answer 4

实现目标的一个简单方法是保留一个不可见的 div，它可以存储内容并仅附加到它。或者您可以使用内容创建一个新的不可见 div，然后稍后找到它。例如，您可以执行以下操作：

<div id="storagediv" style="visibility:hidden">

</div>



 $("#sm_tool").click(function () {

        //Check here if you need to do somewith with the existing content.
        $("#storagediv").load("main_mid.php");

                });

Answer 5

将它们存储在不同的隐藏 div 中，并使用隐藏 div 作为内容源。检查隐藏的 div 是否有子元素（文本块除外）

Answer 6

您可以使用两个不同的 div（一个用于 taylor_made，另一个用于 sm_tool），而不是只使用一个。您可以在第一次单击时加载它们，并可以从下次开始在它们之间切换。