在函数之间切换 - 仅在pageload

Question

我想在两个jQuery函数之间切换。它必须在页面加载时完成 - 每个页面加载应该只执行一个脚本。

这是我到目前为止所得到的：

HTML：

<button class=".click">Click me</button>

脚本：

$(function() {
    if (window.location.href.indexOf("addClass") > -1) {
        $("body").addClass("test");
    }
    else {
        $("body").addClass("secondtest");
    }
    $('.click').on('click', function() {
        console.log("Clicked");
        var url = window.location.href;
        if (url.indexOf('?') > -1) {
            url += '?param=addClass'
        } else {
            url += '?param=1'
        }
        window.location.href = url;
    });
});

这让我有点在路上，第一次点击时第一次点击添加?param=1 - 没有任何反应 - 第二次点击它会添加?param=addClass并且正文获得该类。如果我再次点击它，每次都会添加?param=addClass。

我希望其中一个脚本默认运行 - 然后我想要第一个按钮点击重新加载并运行另一个脚本。如果我再次单击，我希望它反转url，以便加载第一个脚本，如切换。

我现在有一种简单的方法来切换类，但我特别需要在新的页面加载上运行两个脚本中的一个。

更新：

$(function() {
if (window.location.href.indexOf("addClass") > -1) {
$("body").addClass("test");
}
else {
$("body").addClass("secondtest");
}
$('.click').on('click', function() {
console.log("Clicked");
var url = window.location.pathname;
var url = window.location.href;
if (url.indexOf('?param=1') > -1) {
url = url.replace("param=1", "")+'param=addClass'
} else {
url = url.replace("?param=addClass", "")+'?param=1'
}
window.location.href = url;
});
});

这会在第一页加载时设置正文类 - 然后首先点击广告？param = 1但不会更改正文类。第二次单击使用？param = addClass替换？param = 1并更改body类 - 之后切换工作。那么如何让它从第一次点击开始工作呢？

Answer 1

这将是默认功能，如果不存在查询字符串，则添加?param=1：

var url = window.location.href;
if(url.indexOf('?param=1')==-1 )
  {
    window.location.href = url+"?param=1";
  }

这将是onclick功能，可以在替换现有功能时切换urls。

$('.click').on('click', function() {
        var url = window.location.href;
        if (url.indexOf('?param=1') > -1) {
            url = url.replace("param=1", "")+'param=addClass'
        } else {
            url = url.replace("?param=addClass", "")+'?param=1'
        }
        window.location.href = url;
});

如果您想要切换课程，也可以使用.toggleClass("test secondtest")

Answer 2

您遇到的问题是if：

var url = window.location.href;
if (url.indexOf('?') > -1) {
    url += '?param=addClass'
} else {
    url += '?param=1'
}

场景1：/test.html

indexOf('?')将是否定的。然后，您会将用户重定向到/test.html?param=1

场景2：/test.html?param=1

indexOf('?')将是积极的。然后，您会将用户重定向到/test.html?param=1?param=addClass

场景3：/test.html?param=addClass

indexOf('?')将是积极的。然后，您会将用户重定向到/test.html?param=addClass?param=addClass

所以...出了什么问题？

您正在使用window.location.href。非常适合设置路径，但如果您想要实际管理查询参数则会很糟糕。

解决方案

var url = window.location.pathname;
var hasParams = window.location.href.indexOf('?') > -1;
if (hasParams) {
    url += '?param=addClass'
} else {
    url += '?param=1'
}
window.location.href = url;

由于您在同一主机上重定向（使用您的代码看到），因此您只需要pathname。 pathname不包含参数（?key=value&...），可用于重定向同一域中的用户。