Question

目前我正在使用jquery .load在点击链接时在我的网站上的新弹出窗格中显示一些图像，代码如下。

$(".more_images").click(function () {
    $("#uploads").show("slow", function () {
        $("#uploads").load("http://www.sunshinecoastdetailing.com.au/uploads", function () {
            $(".i_img").click(function () {
                var url = $(this).attr("href");
                $("#uploads").load(url, function () {
                    $(document).watermark();
                    $("#uploads").click(function () {
                        $("#uploads").fadeOut(300);
                    });
                });
                return false;
            });
        });
    });
    return false;
});

然后，回调函数允许单击图像并将其加载到同一个div中。我的问题是，我希望有一个后退按钮，并以某种方式保留功能仍然单击图像并将它们加载到同一个div中，记住.load内容不是加载jquery，因此功能需要以某种方式保存。

我意识到存在插件，但是如果可以的话，我宁愿保持简单。

Answer 1

不能用jsfiddle真正测试它，但是这样的工作会不会这样？

有两个div并将html加载到变量中并更改第二个div。单击按钮时，隐藏按钮并重置第二个div的html。

HTML：

<button id="more_images">More Images</button>
<div id="uploads" style="display:none;">Images:
    <div id="uploadImages"></div>
    <button id="goBack" style="display:none">Back</button>
</div>

JS：

$("#more_images").click(function () {
    $("#uploads").show("slow", function () {
        $.get("http://www.sunshinecoastdetailing.com.au/uploads", function( imgHtml ) {
            $("#uploadImages").html(imgHtml);
            $("#uploadImages").on("click", ".i_img", function (e) {
                e.preventDefault();
                var url = $(this).attr("href");

                $("#uploadImages").load(url, function () {
                    $("#goBack").toggle();
                    $("#goBack").click(function () {
                        $("#uploadImages").html(imgHtml);
                        $("#goBack").toggle();
                    });
                });

                return false;
            });
        });
    });
    return false;
});

jquery加载和保留函数

1 个答案: