Javascript html 字符串连接 未捕获的语法错误:缺少参数列表之后的 )

Question

>有谁知道我在这里错过了什么？当然，错误来自参数列表后的show_more('+ 链接 +'( 未捕获的语法错误：缺少 (

function show_more(mylink) {
console.log(mylink);
alert(mylink);
}

function getImages(index, stop) {
var html = "";
currentIndex += stop;
// create the img tags.
for (var i = index; i < index + stop; i++) {
var link = "http://31stbridge.com/godson_project/uploads/" + images[i].photo_url;
html += '<div class="grid-item"><a href="#" onclick="show_more('+ link +')"><img src="http://baseurl/path/' + images[i].photo_url + '"></a><div class = "subtitle" align="center"> <h1>' + images[i].photo_group + '</h1><form><button class="downloadbut" formaction="' + images[i].zip + '"></button></form></div></div>';
}
var str = $(html);
grid.append(str);
grid.masonry("appended", str);
}
});

Answer 1

问题是缺少双引号。你有：

html += '... onclick="show_more('+ link +')">...'

你有一个用单引号括起来的全局字符串，其中用双引号定义属性"onclick"的值，你将在圆括号之间拥有链接 raw 的值。

您应该添加 -引号 - 转义的单引号：

html += '... onclick="show_more(''+ link +'')">...'

Answer 2

为什么不使用模板字符串，将使字符串的形成更加简单和容易。看看下面的片段。

在当前代码中，缺少一些引号show_more("'+ 链接 +'"(尝试完全避免这种方法。

function getImages(index, stop) {
var html = "";
currentIndex += stop;
// create the img tags.
for (var i = index; i < index + stop; i++) {
var link = "http://31stbridge.com/godson_project/uploads/" + images[i].photo_url;
html += `<div class="grid-item"><a href="#" onclick="show_more('${link}')"><img src="http://baseurl/path/${images[i].photo_url}"></a><div class = "subtitle" align="center"> <h1>${images[i].photo_group}</h1><form><button class="downloadbut" formaction="${images[i].zip}"></button></form></div></div>`;
}
var str = $(html);
grid.append(str);
grid.masonry("appended", str);
}
});

在下面创建一个虚拟代码段来证明它正在工作。

function show_more(mylink) {
console.log('a')
console.log(mylink);
}
function dummyGetImages() {
document.getElementById('test').innerHTML += `<div class="grid-item"><a href="#" onclick="show_more('${"123"}')"><img src="http://baseurl/path/${"url"}" alt="click here to see it works"/></a><div class = "subtitle" align="center"> <h1>${"group"}</h1><form><button class="downloadbut" formaction="${"action"}"></button></form></div></div>`;
}
dummyGetImages();

<div id="test"></div>

Answer 3

末尾的额外括号会在控制台中出现意外错误

function getImages(index, stop) {
var html = "";
currentIndex += stop;
// create the img tags.
for (var i = index; i < index + stop; i++) {
var link = "http://31stbridge.com/godson_project/uploads/" + images[i].photo_url;
html += '<div class="grid-item"><a href="#" onclick="show_more("'+ link +'")"><img src="http://baseurl/path/' + images[i].photo_url + '"></a><div class = "subtitle" align="center"> <h1>' + images[i].photo_group + '</h1><form><button class="downloadbut" formaction="' + images[i].zip + '"></button></form></div></div>';
}
var str = $(html);
grid.append(str);
grid.masonry("appended", str);
}