0

我必须根据从其他地方获取的一些数据（json）动态创建一系列链接，单击时更改一些其他元素的属性（src、类、文本）。

我有这样一段代码：

  // 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>');
  });

然而，正确逃脱所有这些角色花了我两个小时。我想在那里调用其他地方定义的参数化函数。然后我只需要输入参数。

我尝试了许多我在 stackoverflow.com 上找到的各种组合，这让我非常头疼。

请帮忙。

4

1 回答 1

0

偶然地，经过几个小时的尝试和重试，我问我的朋友，他聪明的头脑告诉我用更复杂的方式来做：

  • 在纯 JavaScript 中创建参数化函数。
  • 使用闭包 - 仅将调用上述具有足够参数的匿名函数分配给 onclick。
  • 创建标签的模式字符串以传递给 document.write(html)，并为 onclick 函数代码提供类似变量的部分。
  • 使用 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 的人有所帮助。

还有一件事，我曾经考虑过一个细节，但结果却是一个非常严肃的问题：语法。要使闭包函数起作用：

  • 像往常一样写一个函数
  • 用括号括起来
  • 后面跟着另一对空括号

像这样：

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

现在它是一个匿名函数，而不仅仅是一个匿名函数调用。现在它可以工作了。

于 2012-08-25T10:53:43.630 回答