javascript - html标签的class属性里面怎么嵌入变量

问题描述

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'>&nbspdetail</span></p>’;

我想把第一行的id变量（是一个数字）加到第三行p标签的class属性里面，可以直接嵌进去吗？

问题解答

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'>&nbspdetail</span> </p>’;回答2：

你的问题实质是如何改变拼接出来的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'>&nbspdetail</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'>&nbspdetail</span></p>`;回答3：

由于你这个其实是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'>&nbspdetail</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'>&nbspdetail</span></p>`;回答4：

Addattribute 试试