Question

我有一个外部js文件，我正在创建一个标记。

问题是如果我要在下面的代码中添加onclick事件，我不知道如何使用引号。

现在这段代码有效：

banner_div.innerHTML = '<a href=\"'+links[counter]+'\"><img src=\"'+images[counter]+'\" border=\"1px\" style=\"border-color:#000;\" alt=\"'+alts[counter]+'\" title=\"'+titles[counter]+'\"></a>';

但我需要将其添加到上面：

onclick="_gaq.push(['_trackEvent', 'Link Clicks', 'From Index.html', 'www.domain.com']);"

我应该如何将onclick事件插入第一段代码才能生效？

由于

BTW：上面的数组在for循环中迭代。例如，链接[counter]包含links数组的当前索引，例如“www.somedomain.com”。

Answer 1

在单引号分隔的字符串中使用单引号看起来有问题。请记住，整个onclick = thing位于由单引号括起的大字符串内。所以只需反斜杠 - 逃避单引号：

onclick="_gaq.push([\'_trackEvent\', \'Link Clicks\', \'From Index.html\', \'www.domain.com\']);"

我会避免使用innerHTML，特别是如果你有很多替换。太多可能会出错。例如，如果alts [counter]有一些特殊的HTML字符，例如&，该怎么办？我会使用DOM来操纵对象。例如

a = document.createElement("a");
a.href = links[counter];
a.setAttribute("onclick", "_gaq.push(['_trackEvent', 'Link Clicks', 'From Index.html', 'www.domain.com']);")
img = document.createElement("img");
img.src = images[counter];
img.border = "1px";
img.style = "border-color:#000;";
img.alt = alts[counter];
img.title = titles[counter];
a.appendChild(img);
banner_div.appendChild(a);

虽然我猜测没有测试它，所以可能有点不对。

请注意，我使用简写属性表示法来分配所有属性，但我使用setAttribute分配onclick，因为我尝试使用属性表示法，但它对我不起作用（ DOM HTML规范允许您直接设置大多数属性，但不能onclick）。

Answer 2

你不必在单引号字符串中转义双引号（反之亦然），所以首先我们可以通过恰当地交替引用类型来简化这一点：

banner_div.innerHTML = '<a onclick="' + "_gaq.push(['_trackEvent', 'Link Clicks', 'From Index.html', 'www.domain.com']);" + '" href="' + links[counter] + '"><img src="' + images[counter] + '" border="1px" style="border-color:#000;" alt="' + alts[counter] + '" title="' + titles[counter] + '"></a>';

在我看来，这比在接受的答案中进行DOM操作更简单。我们不必逃避任何事情，除了良好的旧字符串连接之外我们不会使用单个函数。

为什么我们有两种报价？为了制作带有大量引号的场景（比如这个）简单！

需要小的JavaScript语法帮助（简短的问题）

2 个答案: