Question

我正在尝试使用JavaScript函数创建一个带有参数的href标记的代码。参数是一个字符串和一个转换为json字符串的对象。我的尝试是这样的：

return '<a style="text-decoration:underline;cursor:pointer" target="_blank"' +
                   ' href="javascript:goToStateNewWindow(\'trending\', \'' + JSON.stringify(params) + '\')">' + value + '</a>';

错误是：

未捕获的SyntaxError：无效或意外的令牌

在Inspect窗口中，它看起来像这样：

<a style="text-decoration:underline;cursor:pointer" target="_blank" href="javascript:goToStateNewWindow('trending', '{" projectid":2313,"alarmsonly":"true"}')"="">test</a>

有人可以解释一下我做错了吗？

Answer 1

有人可以解释一下我做错了吗？

对不起。但一切。这是你应该如何创建元素，例如在一个函数中。

var a = document.createElement('a');
var t = document.createTextNode(value);
a.appendChild(t);
a.style.textDecoration = 'underline';
a.style.cursor = 'pointer';
a.setAttribute("target", "_blank");
document.body.appendChild(a); // or any other element you want the a to appear in
a.addEventListener("click", function(e) {
  e.preventDefault();
  goToStateNewWindow('trending', params);
});

请注意，您也可以在...之前使用css设置元素的样式。

Answer 2

首先，它不应该是<a>元素，而是<button>。如果需要，可以使用CSS使其看起来像<a>。

其次，您应该使用document.createElement()创建en元素，添加属性并使用addEventListener()方法指定click事件侦听器。

const element = document.createElement('button')
element.setAttribute('type', 'button')
element.setAttribute('style', 'text-decoration:underline;cursor:pointer;')
element.setAttribute('target', '_blank')
element.addEventListener('click', event => goToStateNewWindow('trending', params))
element.innerHTML = value

return element.outerHTML

Answer 3

我想解释一下为什么它不起作用。这是因为在您的html中，当您调用href="javascript:...时，JSON.stringify(params)会返回{"projectid":2313,"alarmsonly":true}，然后javascript解析器会在href="之后的第一个双引号处停止（{{ 1}}）其余的（{"）变为无效的javascript。

我创建了一个用单引号替换双引号的函数。如果对象具有带双引号的字符串值，则可能无效。

＆＃13;

projectid":2313,"alarmsonly":true}...

＆＃13;

单击href时，使用参数调用JavaScript函数

3 个答案: