0

我想使用 javascript 或 jquery 根据 URL 查询字符串向对象添加一个类。

因此，如果 url 是，example.com/?var=1那么我想向对象添加一个新类 #mydiv

这将被重复?var=2，?var=3依此类推。

这是我尝试过的。这样做的希望是，如果查询字符串是?var=2或?var=3

var queryString = window.location.search.substr(1); 

switch (queryString) {
    case "2": document.getElementById('mydiv').className = 'newclass2';
;
                   break;
    case "3": document.getElementById('mydiv').className = 'newclass2';
;
                     break;
  }

编辑：

它现在几乎可以工作了......

这是我当前的代码：

<script>
 var queryString = window.location.search.substr(1);
 var variant = queryString.split('=')[1];
 switch(variant) {
    case "stnl2": document.getElementById('getexclusive-sb').className = 'stnlvar2';
;
break;
    case "stnl3": document.getElementById('getexclusive-sb').className = 'stnlvar3';
;
break;
  }
</script>

如果 url 为 "/?v=stnl2" 则有效

然而，Google 内容会在 url 中添加更多内容，例如“?v=stnl2&utm_expid=42387987-0.dmsadhasjkdjasgdjgas-Q.4”

有没有办法让我忽略 & 和所有细节之后我的代码仍然有效？

4

2 回答 2

0

您尝试的解决方案有两个问题。

首先，您错误地获得了变体的数量。使用您的代码，queryString将像"var=2". 因此，如果您只想要数字，您还应该将其拆分为=：

 var queryString = window.location.search.substr(1);
 var variant = queryString.split('=')[1];
 switch(variant) {
     // ...
 }

请注意，这实际上仍然不会检查参数的名称，即var=. 如果它是唯一的参数，它将起作用。否则，为了正确处理 JS 中的查询字符串，您可能需要查看这个问题

第二，用心看你的switch。两个分支实际上是相同的，因此无论 queryString 是什么，它们都会做同样的事情。好像是无意中复制粘贴的。

升级版：

正如我在原始答案中所说，我只是指出了解决方案中的一些问题以及如何解决这些问题。如果有多个参数，它将不起作用。当然，你可以忽略 . 之后的所有字符串&。但是仍然会有很多情况下它仍然不起作用：如果您的参数不是第一个怎么办？

我认为做出这样的假设并不是一个好主意，所以我们来看看我之前所说的：你可能需要对参数进行适当的、全面的解析。我提到的链接为此特定任务提供了很多解决方案，您可以选择其中任何一个。另一种选择是使用一些提供此类功能的现有库。该问题和其他一些 SO 问题向我指出了这两个问题：

  • jquery.parsequery — 一个仅用于此目的的 jQuery 插件，您可以使用它来执行variant = $.query(location).get("paramName"). 好像很旧，没有更新。
  • jsurl——一个用 URL 做不同事情的库，特别是你可以variant = (new Url).query.paramName用它来做。

注意：（替换paramName为您的实际参数名称v或var其他）

当然可能还有其他一些不错的库，也可以尝试自己搜索。

于 2013-10-15T11:09:26.163 回答
0 
var getUrlVars = function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++){
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    if(vars[0] == window.location.href){
        vars =[];
    }
    return vars;
}
var params = getUrlVars();
switch (params['var']){
...
}

您的参数将包含查询字符串中的所有参数。只需将变量名称作为字符串传递，您将获得该参数的值。

于 2013-10-15T12:59:49.280 回答