html 之 title属性存储json数据的注意点(转)

https://www.jianshu.com/p/a6c89d5cdaaf

我所在的公司是做即时用工软件的,软件里有用户聊天功能。聊天界面里面会有 雇工报名雇主的报名通知,点击该报名通知后,根据订单id,订单类型 ,订单标题跳转指定界面,在渲染UI的时,我用了jQuery的append()函数,将代码渲染到界面上。之前本打算将多个参数放到每个报名通知的onclick事件,但是代码显得非常乱,所以onclick里面只放了当前标签对象this作为参数,取而代之的是,我是将多个参数放到title属性里面存储。
但是用什么格式存储参数呢?当时是json数据啦,json数据很直观。于是就将多个参数构造成json类型的数据放到title里面。
但是出现了很多问题,其中一个问题就是提示single quotes are not allowed in json的错误以及其他莫名其妙的错误。
最终慢慢尝试最终用如下格式的json写法(见主要代码A),简明扼要的说一下:
1:title对应的值要跟着单引号。
2:然后要让titleValue成变量,就得在单引号里面加"+titleValue+",让titleValue成为变量。
3:最中啊哟的一点就是,构造json数据的时候,{}的外层也要用单引号包着。

主要代码A

<script type="text/javascript">
// 第一次进入页面时加载的订单消息  订单id,、头像、内容,标题
function other_first_order_message(time,mesg_id,order_type,avatar,mesg_content,title,difTime) {

    var titleValue='{"order_id":"'+mesg_id+'","order_type":"'+order_type+'","title":"'+title+'"}';
    if(difTime > timeInterval){
        $('.talkContainter').append("<section onclick='otherOrderClick(this)' title='"+titleValue+"'><div class='timeTitle'><span>" + time + "</span></div><div class='orderNoticeBox'><div style='font-size: 15px;font-weight: bold;'>"+ title +"(有人报名啦)</div><div style='font-size:13px;color:#808080;margin:8px 0;'>"+mesg_content+"</div><div class='orderDetailBtn'><span>自己订单-查看详情</span><span class='iconfont icon-fanhui'></span></div></div></section>");
    }else {
        $('.talkContainter').append("<section onclick='otherOrderClick(this)' title='"+titleValue+"'><div class='timeTitle'></div><div class='orderNoticeBox'><div style='font-size: 15px;font-weight: bold;'>"+ title +"(有人报名啦)</div><div style='font-size:13px;color:#808080;margin:8px 0;'>"+mesg_content+"</div><div class='orderDetailBtn'><span>自己订单-查看详情</span><span class='iconfont icon-fanhui'></span></div></div></section>");
    }

}
</script>

https://codingdict.com/questions/14090

原文地址:https://www.cnblogs.com/huanghongbo/p/15383391.html