zoukankan      html  css  js  c++  java
  • 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示

    <script id="commentTemplate" type="text/html">   
        <li>  
            <div class="photo">  
                <a href="#"> <img src="[UserImg]" style="height:50px;" /></a>  
            </div>  
            <p>  
                <a href="#">[UserName]:</a><span class="time">[CreateDate]</span>  
            </p>  
            <div class="clear"></div>  
        </li>  
    </script> 

    上面的代码片段的使用

    <html>  
    <head>  
    <title>标题</title>  
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>  
    <body>  
        <div id="comment_ul_2"></div>  
        <input type="button" id="addFun" value="click me" />  
        <script type="text/javascript">  
            //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。  
            var reg = new RegExp("\[([^\[\]]*?)\]", 'igm'); 
            $("#addFun").click(function() {  
                var html = document.getElementById("commentTemplate").innerHTML;  
                var source = html.replace(reg, function(node, key) {  
                    return {  
                        'UserImg' : 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1459913929&di=1934ccc3709e8e2301e73b578270212a&src=http://p7.qhimg.com/t01e6b39b78a7a65ac0.jpg',  
                        'UserName' : 'ABC',  
                        'CreateDate' : '2011-1-1'  
                    }[key];  
                });  
                $("#comment_ul_2").append(source);  
            });   
        </script>  
    </body>  
    </html>  

    当单击按钮时,可以把commentTemplate的内容追到comment_ul_2里

    在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值

  • 相关阅读:
    mysql视图产生派生表无法优化案例
    根据.frm .ibd文件恢复表
    binlog内容时间乱序问题排查
    mysql官方的测试数据库employees超30万的数据,安装方法介绍
    数据库大量Waiting for table flush 状态SQL问题排查
    mysql搭建从库并配置ssl
    MySQL lOAD DATA详解
    redis eval
    aws-rds for mysql 5.7.34时间点恢复数据
    MySQL 如何处理监听连接的
  • 原文地址:https://www.cnblogs.com/baby123/p/5358611.html
Copyright © 2011-2022 走看看