0

クリックすると、他の要素のプロパティ（src、class、text）を変更し、他の場所（json）から取得したデータに基づいて、一連のリンクを動的に作成する必要があります。

私はそのようなコードを持っています：

  // this is data I need processed
  screenshots = report_data.screenshots;
  // for each I'd like to create a link
  for (var i=0; i < screenshots.length; i++) {
      document.write('<a href="" onclick="{document.getElementById(\'the_screenshot\').src = \''+ screenshots[i].screenshotFile + '\'; ' + 'return false;}">' + screenshots[i].screenshotTitle + '</a>');
  });

ただし、これらすべての文字を適切にエスケープするには2時間かかりました。他の場所で定義されたパラメーター化された関数を呼び出したいと思います。次に、パラメータを入力するだけです。

私はstackoverflow.comで見つけたもののさまざまな組み合わせを試してみましたが、ひどい頭痛につながりました。

助けてください。

4

1 に答える 1

0

偶然にも、何時間も試して再試行した後、私は友人に尋ねました、そして彼の賢い頭は私にそれをいくらかより洗練された方法で行うように言いました：

  • プレーンなJavaScriptでパラメーター化された関数を作成します。
  • クロージャを使用する-適切なパラメータを使用して上記を呼び出す無名関数のみをonclickに割り当てます。
  • onclick関数コードの変数のようなセクションを持つdocument.write（html）に渡すタグのパターン文字列を作成します。
  • string.replace（A、toB）関数を使用します。割り当てる関数コードを使用して文字列を作成します。
  • 必要に応じて、関数パラメーターを使用して同じトリックを実行します。
  • 記入したパターンをdocument.writa（html）関数に渡します。

最終的な解決策は次のようになります（完全に同じではないかもしれませんが、アイデアは指摘されています）：

// function to call by closure
onLinkClick = function(SRC) {
    document.getElementById('the_screenshot').src = SRC;
    // and here one can place as much code as he needs // plain js
    // and I did it
}

// this is data I need processed
screenshots = report_data.screenshots;
for (var i=0; i < screenshots.length; i++) {
    // first enlist every basic part with it's inner parameters as text
    var pattern = '<a href="" onclick=ONCLICK>TEXT</a>'
    var onclick = '(function (){onLinkClick(PARAM); return false;})()';
    var text = screenshots[i].screenshotTitle;
    var param = screenshots[i].screenshotFile;
    // now inject them - without any more escaping via replace
    onclick = onclick.replace('PARAM', param);
    pattern = pattern.replace('ONCLICK', onclick);
    pattern = pattern.replace('TEXT', text);
    document.write(pattern);
});

このように、コードは最初のアプローチよりもはるかにエレガントに見えます。これが将来javascriptに直面しなければならない人々に役立つことを願っています。

もう1つ、私は以前は詳細を考えていましたが、それは非常に深刻であることが判明しました。構文です。クロージャ関数を作成するには、それが機能します。

  • いつものように関数を書く
  • かっこで囲みます
  • 空の括弧の別のペアが続きます

このような：

(function(){return false;})()

これで、匿名関数呼び出しだけでなく、匿名関数になりました。そして今、それは機能します。

于 2012-08-25T10:53:43.630 に答える