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 試試