一、场景

我们有时会把需要用到的内容放到html标签的属性中。

如下，是没问题的

<div data-id='1' data-content='内容'>是个div</div>

如下，是有问题的

<div data-id='1' data-content='<span style='color: red'>内容</span>'>是个div</div>

<div data-id="1" data-content="<span style="color: red">内容</span>">是个div</div>

这样不就行了吗

<div data-id="1" data-content="<span style='color:red'>内容</span>">是个div</div>

这样治标不治本：如果内容里面的单双引号是不可控的呢（比如：用户填写的数据，从后台传过来的）

二、解决

给个隐藏域存放 data-content 的值，然后取出隐藏域的值。
tips：我毕竟不是专业的，如果大家有更好的方法欢迎留言交流

三、代码

页面效果
jQuery自定义的属性内容包含单引号、双引号，页面显示异常-小白菜博客
点击test1效果

点击test2效果
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>jQuery自定义的属性内容包含单引号、双引号，页面显示异常</title>
    <style>
        .detail-class, .detail-class:hover{
            cursor: pointer;
            color: #47C1A8;
            display: inline-block;
            flex: 1;
        }

        .test2-detail{
            display: none;
        }
    </style>

    <!-- 引入jquery -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<!-- test1 -->
<div id="test1" class="detail-class" data-id="1" data-content="<span style="color:red">这是test1详情</span>">
    test1
</div>

<br/>

<!-- test2 -->
<div id="test2" class="detail-class" data-id="1">
    <!-- 写一个隐藏域隐藏详情内容 -->
    <span class="test2-detail"><span style="color:red">这是test2详情</span></span>
    test2
</div>

</body>
<script>
    //test1点击事件
    $('#test1').click(function () {
        var id = $(this).data('id');
        var content = $(this).data('content'); //获取元素属性 data-content 的值
        var text = 'id是：' + id + '；内容是：' + content;
        alert(text)
    });

    //test2点击事件
    $('#test2').click(function() {
        var id = $(this).data('id');
        var content = $(this).find('span:hidden[class="test2-detail"]').html(); //获取隐藏域的内容：html标签也要获取（注意html()与text()的区别）
        var text = 'id是：' + id + '；内容是：' + content;
        alert(text)
    });

</script>
</html>