Question

我是JQuery的新手，需要som指导。

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

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

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

我的问题是：

如何从服务器加载内容并以某种方式将其存储在客户端
检查内容是否已加载
下次应该显示内容而不是再次从服务器加载内容
不以任何方式重叠内容

我的脚本：

 $(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

使用查询的数据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 2

实现目标的一种简单方法是保留一个不可见的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 3

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

Answer 4

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

Answer 5

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

创建两个内容div，例如“section2_sm_tool”和“section2_taylor_made”，其中一个被设为“display：none”。

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

然后，在每个按钮上单击，而不是重新加载内容，只需.hide（）一个div和.show（）另一个。

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

Answer 6

这是我在 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属性。

使用jquery加载和重用内容

6 个答案: