Question

我在页面上有一些链接，当用户点击链接时，会重新加载页面。

所有链接都有一些ID，并且所有链接都有相同的类。

我需要在重新加载页面后点击其他链接，但前提是用户点击某个特定类的链接（不是任何地方，如菜单链接）。

我如何使用JS或jQuery做这样的事情？

Answer 1

听起来您正在尝试构建单个页面应用程序，即应用程序主要由JavaScript而不是服务器端呈现来运行。在这种情况下，页面重新加载是你的敌人。页面重新加载基本上是重新启动页面，虽然您可以使用Cookie或localStorage保持状态，但这会为您提供相当差的用户体验。

在这种情况下，您只需向用户执行的任何操作添加事件处理程序，只需在javascript中处理它们，而无需从服务器重新加载页面。如果您需要获取更多数据以响应用户的操作，您可以使用AJAX从服务器提取该数据。

如果你必须使用网址链接（我仍然不清楚为什么需要这样做），我建议使用像'#some-action'这样的哈希网址，点击时不会重新加载页面。然后，您可以将事件处理程序附加到链接，甚至可以使用hashchange事件侦听要更改的url哈希值。通过这种方式，您可以知道用户按下的链接。

如果您不想构建单个页面应用程序，则需要在服务器上添加代码以在页面中存储所需的信息。

Answer 2

我做到了。

所以，我创建了函数：

/**
 * Click on delivery link after page reload
 *
 * @return {boolean} [loacalStorage is available]
 */
$.fn.openDelivery = function(){
    if (localStorage) {
        var addedToCart = localStorage["addCart"];
        if (addedToCart) {
            setTimeout(function() {
                $('#showRight').trigger('click');
            }, 1500);
            localStorage.removeItem("addCart");
        }
        $(this).click(function(e) {
            localStorage["addCart"] = true;
        });

        return true;
    }

    return false;
};

然后调用该函数：

$(document).ready(function () {
    // Trigger delivery click
    $('.class-of-my-link').openDelivery();
});

在我的情况下，用户在购物车中添加一些项目后页面会重新加载。使用此功能，我点击链接（延迟1.5秒），打开屏幕右侧显示的用户购物车。

页面重新加载后单击按钮

2 个答案: