我们可以在 <script>
片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法:
1 2 3 4 5 6 7 8 9
| <script id="commentTemplate" type="text/html"> <li> <div class="photo"> <a href="#"><img src="[UserImg]" /></a> </div> <p><a href="#">[UserName]:</a><span class="time">[CreateDate]</span></p> <div class="clear"></div> </li> </script>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <div id="comment_ul_2"></div>
<input type="button" id="addFun" value="click me" />
<script type="text/javascript"> var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); $("#addFun").click(function () { var html = document.getElementById("commentTemplate").innerHTML; var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; }); $("#comment_ul_2").append(source); });
var zzl = "name:[name]"; zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; }); alert(zzl); </script>
|
OK,这个意思是说,当你单击按钮时,可以把 commentTemplate
的内容追到 comment_ul_2
里,这很有意思吧,呵呵!
而其中有一个 replace
,也很有意思,向在替换时,可以接受一个 json 字符串,然后根据 json 的 key
来对比 js 模块里的 key
,进行赋值!
真的很有意思!