Question

我必须动态创建一系列链接，点击时 - 更改其他元素属性（src，类，文本），基于从其他地方（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>');
  });

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

我尝试了很多我在stackoverflow.com上找到的各种组合让我头疼得厉害。

请帮助。

Answer 1

无意中，经过几个小时的尝试和重试后，我问我的朋友和他的智者告诉我要做得更复杂一点：

使用普通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;})()

现在它是一个匿名函数，而不仅仅是一个匿名函数调用。现在它有效。

Javascript动态分配参数化函数到onclick

1 个答案: