3

所以，我真的需要一些帮助。我进行了广泛的搜索，我发现的一些解决方案很棒，但对我不起作用，所以这里......

当有人访问我的网站时，他们会点击一个链接，该链接会将 URL 传递给“recipes.html”……例如，如果他们点击“Ancho Chile Sauce”，则 URL 将是：

blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

此参数实际上是文件夹“Recipes”中的 JPEG 名称，当然扩展名为“.jpg”

我需要将此参数放入一个字符串中，并在其前添加“Recipes/”并在其后添加“.jpg”，然后在我的 html 文档中更改图像标记的源以显示新的动态调用的配方图像。

我以为我已经做到了，但似乎没有任何效果。显然我的 Javascript 做错了什么，因为我的标记工作正常，并且带有参数的 url 正在被传递。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Recipes</title>
<link href="mobi-styles.css" rel="stylesheet" />
<script type="text/javascript">
function getParam ( sname )
{
  var params = location.search.substr(location.search.indexOf("?")+1);
  var sval = "";
  params = params.split("&");
    // split param and value into individual pieces
    for (var i=0; i<params.length; i++)
       {
         temp = params[i].split("=");
         if ( [temp[0]] == sname ) { sval = temp[1]; }
       }
  return sval;
}
window.onload = changePic();
var param = getParam("r");
var recipeName = "Recipes/"+param+".jpg";
function changePic() {
document.getElementById("recipe").src=recipeName;
}
</script>
</head>

<body>
<img class"resizer" id="recipe" src="" />
</body>
</html>

请帮忙！我爱你很久了！

4

5 回答 5

6

删除(). 附加事件时，您分配一个函数，而不是函数调用的结果。您所做的是调用changePic()，返回sval并分配svalto的值window.onload- 这是错误的。

window.onload = changePic;
                         ^---remove ()

并window.onload = changePic在底部移动，这样 JSLint 就不会生气了。最好的做法是在使用函数之前先声明函数，即使有提升也是如此。

于 2012-05-15T22:16:41.923 回答
3

我写了一个小脚本，让我过去可以访问 url 参数，它可能非常有效。它在文件的开头运行，因此您可以随时访问它们。

GET = (function () {
    var get = {
        push:function (key,value){
            var cur = this[key];
            if (cur.isArray){
                this[key].push(value);
            }else {
                this[key] = [];
                this[key].push(cur);
                this[key].push(value);
            }
        }
    },
    search = document.location.search,
    decode = function (s,boo) {
        var a = decodeURIComponent(s.split("+").join(" "));
        return boo? a.replace(/\s+/g,''):a;
    };
    search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function (a,b,c) {
        if (get[decode(b,true)]){
            get.push(decode(b,true),decode(c));
        }else {
            get[decode(b,true)] = decode(c);
        }
    });
    return get;
})();

现在您可以访问所需的参数：

blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

GET['r']; // will print: Ancho-Chile-Sauce

或者

GET.r;

如果参数重复多次，则将其存储为数组；

example.com/test?name=John&name=Smith

name 属性变成一个数组

GET.name[1] ; // Smith

我希望这可以帮助你

于 2012-05-15T22:31:34.010 回答
1

改变这个：

if ( [temp[0]] == sname ) { sval = temp[1]; }

对此：

if ( temp[0] == sname ) { sval = temp[1]; }
于 2012-05-15T22:13:32.760 回答
1

这是我用来收集 URL 变量的方法：

查询扩展

$.extend({
  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];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});

你可以像这样使用它：

// blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

var r = $.getUrlVar('r');

alert(r); // outputs 'Ancho-Chile-Sauce'

function changePic() {
  $('#recipe').attr("src", r);
}

如果您不使用 Jquery，则只有Javascript的解决方案是：

function getQueryVariable(variable)
{
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}

并且可以这样使用：

var r = getQueryVariable("r");

alert(r); // outputs 'Ancho-Chile-Sauce'

function changePic() {
  document.getElementById("recipe").src = r;
}
于 2012-05-15T22:13:33.470 回答
0 
parseURLparameters(string) {
    let parsed = {};
    (string.split('?')[1] || string).split('&')
                                    .map((item) => {
                                        return item.split('=');
                                    })
                                    .forEach((item) => {
                                        parsed[item[0]] = item[1];
                                    });
    return parsed;
}

所以你可以传递任何字符串：

'?asd'
'?asd=123'
'asd=&kjnwer=13'

等等...

于 2018-02-07T12:52:06.060 回答