Heim > Fragen und Antworten > Hauptteil
var id = snapshot.val().id;
var content = snapshot.val().content;
var textObj = '<p class="task-item">\
<input type="checkbox" />\
<span class="ui-icon ui-icon-clock"></span>\
<span class="task-content">'+content+'</span>\
<span class="task-detail"> detail</span>\
</p>';
Ich möchte die ID-Variable (die eine Zahl ist) in der ersten Zeile zum Klassenattribut des p-Tags in der dritten Zeile hinzufügen. Kann sie direkt eingebettet werden?
ringa_lee2017-06-26 10:54:52
var id = snapshot.val().id;
var content = snapshot.val().content;
var textObj = '<p class="task-item'+id+'">\
<input type="checkbox" />\
<span class="ui-icon ui-icon-clock"></span>\
<span class="task-content">'+content+'</span>\
<span class="task-detail"> detail</span>\
</p>';
typecho2017-06-26 10:54:52
你的问题实质是如何改变拼接出来的HTML模板,本质是拼接字符串。
最笨的方法
var textObj1 = '<p class="task-item"';
var textObj2 = '>\
<input type="checkbox" />\
<span class="ui-icon ui-icon-clock"></span>\
<span class="task-content">'+content+'</span>\
<span class="task-detail"> detail</span>\
</p>';
textObj = textObj1 + id + textObj2
或者直接用ES6 字符串模板,这样比较符合你的变量嵌套。但兼容性会有问题。
var textObj = `<p class="task-item${id}">\
<input type="checkbox" />\
<span class="ui-icon ui-icon-clock"></span>\
<span class="task-content">'+content+'</span>\
<span class="task-detail"> detail</span>\
</p>`;
巴扎黑2017-06-26 10:54:52
由于你这个其实是JS拼接字符串,所以直接用JS的+
将字符串拼接进去。
既然你都知道怎么把content
拼接进去了,那拼接id
也是同理
var id = snapshot.val().id;
var content = snapshot.val().content;
var textObj = '<p class="task-item' + id + '">\
<input type="checkbox" />\
<span class="ui-icon ui-icon-clock"></span>\
<span class="task-content">' + content + '</span>\
<span class="task-detail"> detail</span>\
</p>';
当然,你也可以使用ES6的模板字符串,不过浏览器兼容性会有问题,具体如下:(注意,整个textObj
以`
开始,以`
结束)
var id = snapshot.val().id;
var content = snapshot.val().content;
var textObj = `<p class="task-item${id}">\
<input type="checkbox" />\
<span class="ui-icon ui-icon-clock"></span>\
<span class="task-content">${content}</span>\
<span class="task-detail"> detail</span>\
</p>`;