1

良い一日！コンストラクターに適用されるJavascriptの動的変数名について助けを求めるためにここにいます。予想以上に大変でした。私は多くのフォーラムやウェブページでこの問題について読んだことがありますが、私が間違っていることを見つけることができません= /

私はEaselJSと呼ばれるHTML5+Javascriptライブラリを使用していますが、私の問題はそれに関連しているのではなく、Javascript構文に関連しています！これが私の問題です。私はこのコードを手に入れました：

stage1 = new Stage(document.getElementById("cnvs1"));
stage2 = new Stage(document.getElementById("cnvs2"));
stage3 = new Stage(document.getElementById("cnvs3"));

ここで、変数stageは、canvas id cnvsで初期化されるStageオブジェクトを割り当てています。この行（私のコードの残りの部分のコンテキストでは）は機能します！これを次のようなforを使用して1行に簡略化したいと思います。

for(i = 0; i < 5; i++){
  //Of course this is wrong!
  stage[i] = new Stage(document.getElementById("cnvs[i]"));
}

ここにあるこのリンクは、これがどのように行われるかを再開します：eval（多くの人がそれは推奨されないと言う）とwindow（推奨）を使ってこれを行うと（forさらに単純化することなく）：

var varname = "stage";
var i = 1;
window[varname + i] = new Stage(document.getElementById("cnvs_terminal1"));

コードは引き続き機能します。しかし、引用符で囲まれたキャンバスIDを使用して同様のソリューションを実現する方法を理解することはできません。これらのコード行は失敗します：

var i = 1;
var varname = "stage";
var varname2 = 'cnvs1';
var varname3 = "\"cnvs1\"";
var varname4 = "\"cnvs1" + i + "\"";

window[varname +i] = new Stage(document.getElementById(window[varname2]));
window[varname +i] = new Stage(document.getElementById(window[varname3]));
window[varname +i] = new Stage(document.getElementById(window[varname4]));

これらの試みでは、私が必要とする正確な値を（ iなしで）渡そうとしても、それは私を助けていません!! getElementbyId=（=（=（）に必要だと思うので、引用符をバックスラッシュしています

今、私は無知です！=（これを行う方法があると確信しています。構文がわからない、参照または値によって変数を適切に呼び出す方法がわからない、わからない...助けてください私、この簡単な作業の仕方がわかりません！

たくさんありがとう=）

編集： @cHaoの提案を試してみても私もできません！シンプルに保つために、foriを1つだけに設定しました。

for (var i = 1; i <= 1; ++i) {
  //I use only one of the following lines at a time of course, but I'll write here my failing tries all together:
  stage[i] = new Stage(document.getElementById('cnvs'+i));
  stage[i-1] = new Stage(document.getElementById('cnvs'+i));

  //Hardcoding the first variable works!
  stage1 = new Stage(document.getElementById('cnvs'+i));
}

問題の半分は解決しましたが、最初の変数をどうするか？=/ありがとう!!!!

編集2： 詳細が要求されました！これがコピー/貼り付けの例です！これが機能するように、EaselJSと画像パスを更新するだけです！

<!DOCTYPE HTML>
<html>
  <head>
    <script src="easeljs-0.4.0-26/lib/easel.js"></script>       

    <script type="text/javascript"> 
      function init() {
        //MY PROBLEM LIES HERE!!
        for (var i = 1; i <= 1; ++i) {
          //This code WORKS
          stage1 = new Stage(document.getElementById('cnvs'+i));
          //This code DOES NOT WORKS
          //stage[i] = new Stage(document.getElementById('cnvs'+i));
          //stage[i-1] = new Stage(document.getElementById('cnvs'+i));
        }
        var images = "images/itzapic.jpg";
        bitmap = new Bitmap(images);
        stage1.addChild(bitmap);
        stage1.update();
        Ticker.addListener(window);
      }

      function tick() {
        stage1.update();
      }
    </script>        
  </head>

  <body onload="init()"> 
    <canvas id="cnvs1" width="140" height="82">
  </body>
</html>

__ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _

編集3：解決しました！ EaselJSを使用して、同じオブジェクトで必要な数のキャンバスに1つの画像をレンダリングしたい人を参照するために、最終的なコードを投稿します。このためには、ステージ用のbitmap.clone（）メソッドと配列が必要です。私を助けてくれた@cHaoに感謝します;）次のコードはすべてのキャンバスで同じ画像をレンダリングします！必要に応じて更新してください;）

<!DOCTYPE HTML>
<html>
  <head>
    <script src="easeljs-0.4.0-26/lib/easel.js"></script>       

    <script type="text/javascript"> 
      stage = [];
      function init() {
        for (var i = 1; i <= 6; ++i) {
          stage[i-1] = new Stage(document.getElementById('cnvs'+i));
        }
        var images = "images/itzapic.jpg";
        bitmap = new Bitmap(images);
        stage[0].addChild(bitmap);
        for (var i = 1; i <= 5; ++i) {
          stage[i].addChild(bitmap.clone());
        }
        stage[0].update();
        Ticker.addListener(window);
        }

        function tick() {
        for (var i = 0; i < stage.length; ++i) {
          stage[i].update();
        }
      }
</script>        
</head>

  <body onload="init()"> 
    <canvas id="cnvs1" width="140" height="82"></canvas>
    <canvas id="cnvs2" width="140" height="82"></canvas>
    <canvas id="cnvs3" width="140" height="82"></canvas>
    <canvas id="cnvs4" width="140" height="82"></canvas>
    <canvas id="cnvs5" width="140" height="82"></canvas>
    <canvas id="cnvs6" width="140" height="82"></canvas>
  </body>
</html>
4

3 に答える 3

3

変数名の評価や事前設定などのポイントがわからない。あなたはただのようにできるようです

for (var i = 1; i <= 5; ++i) {
    stage[i] = new Stage(document.getElementById('cnvs' + i));
}

window["varname"]グローバルでない限り役に立たないvarname、そして...ええ。可能であれば、グローバルを避けたいと思うでしょう。いずれにせよ、引用符をエスケープする必要はありません。IDに引用符が含まれていない限り（AFAIKは無効です）、または評価している場合（これは、名前自体に引用符は必要ありません）。それ自体が悪）。

ステージを配列に配置することを検討している場合（これはより良い目標のようです）、最初のステージをにしたいと思うでしょうstage[0]。その場合は、stage[i-1]の代わりに設定してstage[i]ください。

そして、設定しようとしている場合は、、stage1などstage2...停止します。そうしないでください。あなたはあなたが同じように扱っているたくさんのアイテムを持っています...それは配列が意図された種類のものです。一つには、同じような名前の変数よりも配列要素を操作する方がはるかに簡単であることに注意してください。アレイではすでに問題が発生していないため、問題は発生していませんでした。

あなたのコードに関しては...これを見てください。

stage = [];

function init() {
    for (var i = 1; i <= 1; ++i) {
        stage[i-1] = new Stage(document.getElementById('cnvs'+i));
    }
    var images = "images/itzapic.jpg";
    bitmap = new Bitmap(images);
    stage[0].addChild(bitmap);
    stage[0].update();
    Ticker.addListener(window);
}

function tick() {
    for (var i = 0; i < stage.length; ++i) {
        stage[i].update();
    }
}

stage1 stage2破損から配列の使用に切り替えると、必要な数のステージを使用できるようになります。

于 2012-04-11T22:26:05.860 に答える
1

私はあなたがこれを望んでいると思います：

var stagePrefix = 'stage';
var canvasPrefix = 'cnvs';
//adjust loop below based on your naming e.g. do they start at 0 or 1?
for(var i=1;i<5;i++){
  window[stagePrefix + i] = new Stage(document.getElementById(canvasPrefix + i));
}
于 2012-04-11T22:24:15.053 に答える
1

キャンバスを参照するために数値の接尾辞が付いたIDを使用するのではなく、タグ名で取得します。

var canvases = document.getElementsByTagName("canvas");

または、ページ上の特定のキャンバス要素のセットのみを処理する場合は、それらにクラスを指定します。

var canvases = document.getElementsByClassName("cnvs");

次に、キャンバスからステージの配列を取得するには、Array.map()*メソッドをハイジャックします。

var stages = [].map.call(canvases, function(canvas) {
    return new Stage(canvas);
});


*Array.map()はJS5の新機能ですが、ブラウザがサポートし<canvas>ている場合はJS5をサポートします。とにかく、古いブラウザをサポートする必要があり、JS5シムをまだ使用していない場合に備えて、古いブラウザをサポートするために使用できる実装へのリンクは次のとおりです。Array.map()

于 2012-04-11T22:33:12.227 に答える