插入HTML字符串javascript函數/ CONCAT（）

Question

我想Concat的字符串，以創建HTML <ul>/<li>這樣的：

var html = "<ul>"; 
json.elements.forEach(function (tab) 
{ 
    html += "<li><img onclick=partager("; 
    html += tab.title+","+tab.adresse+","+tab.image_url+","+tab.item_url+","+tab.url; 
    html += "); src="+tab.image_url+" /><h3>"+tab.title+"</h3><p>"+tab.adresse+"</p></li>"; 
}); 
html += "</ul>"; 

我如何在HTML包括在<img>標籤中的javascript函數請 ？它沒有工作這樣的...

Answer 1

好像你已經忘了周圍添加HTML參數引號（「」）（的onclick）： <img onclick="partager(...)" ... /> 這是你的代碼可能會如何看（使用ES6） ：

let html = '<ul>' + json.elements.map(tab => 
    `<li> 
    <img onclick="partager(${[tab.title, tab.addresse, tab.image_url, tab.item_url, tab.url].join(',')})" src=${tab.image_url} /> 
    <h3>${tab.title}</h3> 
    <p>${tab.addresse}</p> 
    </li>` 
).join('') + '</ul>' 

，如果你不想做使用ES6，這也將工作：

var html = '<ul>' 
json.elements.forEach(function(tab) { 
    html += '<li><img onclick="partager(' 
    html += [tab.title, tab.addresse, tab.image_url, tab.item_url, tab.url].join(',') 
    html += ')" src="' + tab.image_url + ' /><h3>' + tab.title + '</h3><p>' + tab.addresse + '</p></li>' 
}) 
html += '</ul>'