3

だから、私は本当にいくつかの助けが必要です。私は広範囲にわたる検索を行いました、そして私が見つけた解決策のいくつかは素晴らしいですが私にとってはうまくいきません、それでここに行きます...

誰かが私のサイトに来ると、「recipes.html」へのURLを渡すリンクをクリックします...たとえば、「Ancho Chile Sauce」をクリックした場合、URLは次のようになります。

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

このパラメータは、実際には「Recipes」フォルダ内のJPEGの名前であり、もちろん「.jpg」拡張子が付いています。

このパラメータを文字列に取り、その前に「Recipes /」を追加し、その後に「.jpg」を追加してから、HTMLドキュメントの画像タグのソースを変更して、動的に呼び出される新しいレシピ画像を表示する必要があります。

私はこれをやったと思ったが、何も機能していないようだ。マークアップが正常に機能し、パラメーター付きのURLが渡されるため、Javascriptで明らかに間違っていることがあります。

これが私のコードです：

<!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

を取り外します()。イベントをアタッチするときは、関数呼び出しの結果ではなく、関数を割り当てます。あなたがしたことは callで、 toの値をchangePic()返しsval、割り当てました- それは間違っています。svalwindow.onload

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

window.onload = changePicJSLintが狂わないように一番下に移動します。巻き上げがある場合でも、関数を使用する前に最初に関数を宣言することをお勧めします。

于 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 変数を収集するために使用するものです。

JQuery 拡張機能

$.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 に答える