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'> detail</span></p>’;
我想把第一行的id變量(是一個數字)加到第三行p標簽的class屬性里面,可以直接嵌進去嗎?
問題解答
回答1: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>’;回答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'> 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>`;回答3:
由于你這個其實是JS拼接字符串,所以直接用JS的+將字符串拼接進去。既然你都知道怎么把content拼接進去了,那拼接id也是同理
ES5var 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以`開始,以`結束)
ES6var 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>`;回答4:
Addattribute 試試
相關文章:
1. css3 - border-bottom 的長度可否超過盒子的寬度呢?實現如下圖效果。(我的書下面的線)2. 對mysql某個字段監控的功能3. showpassword里的this 是什么意思?代表哪個元素4. mysql優化 - mysql EXPLAIN之后怎么看結果進行優化 ?5. html - vue項目中用到了elementUI問題6. JavaScript事件7. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?8. javascript - js中向下取整9. mysql scripts提示 /usr/bin/perl: bad interpreter10. python - 為什么正常輸出中文沒有亂碼,zip函數之后出現中文編程unicode編碼的問題,我是遍歷輸出的啊。
