Question

我想为更改页面创建一个按钮。我的问题是，我有一个我之前写的代码，但它的工作方式不是我想要的。

以下是代码：

function loadingPage() {

    $(function () {
        $(".content").load("home.html");
    });

}

function loadingPage_about() {

    $(function () {
        $(".content").load("about.html");
    });

}

button1.onclick = loadingPage;
button2.onclick = loadingPage_about;

我想使用一个函数剪切此代码，然后更改属性中的页面。像这样：

function loadingPage(page) {

    $(function () {
        $(".content").load(page);
    });

}

button1.onclick = loadingPage("home.html");
button2.onclick = loadingPage("about.html");

但是它不起作用，在window.onload和按钮没有改变内容部分后自动加载页面。有人能告诉我为什么这段代码不起作用？：/

Answer 1

此处，loadingPage会立即执行，结果会分配给button.onclick：

button1.onclick = loadingPage("home.html");

要延迟执行，您可以例如将它包装在一个函数中：

button1.onclick = function() {loadingPage("home.html")};

Answer 2

烨！有用！我在main函数中写了一个返回，我不需要将每个调用都包装到loadingPage（）这是代码：

function loadingPage(page) {
    return function () {
        $(function () {
            $(".content").load(page);
        });
    }
}


button1.onclick = loadingPage("home.html");
button2.onclick = loadingPage("about.html");
button3.onclick = loadingPage("info.html");

真的谢谢你们！你真了不起！：）

多页面，动态内容JS

2 个答案: