一、场景
二、解决
三、代码

一、场景

我们有时会把需要用到的内容放到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：我毕竟不是专业的，如果大家有更好的方法欢迎留言交流

三、代码

页面效果

点击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>

jQuery自定义的属性内容包含单引号、双引号，页面显示异常相关推荐

javascript中字符串的‘单‘与“双“引号
通常在使用 javascript 进行编码时,您会遇到对字符串使用"单"或"双"引号的情况,并且想知道两者之间是否有任何真正的区别,如果有,使用一个是否有优势其 ...
达梦8数据库更新语句包含单引号双引号引起转义字符执行失败解决方法全网唯一
达梦数据库更新语句包含单引号双引号引起执行失败解决方法全网唯一如果一个更新的UPDATE更新语句的内容包含单引号',会引起执行错误! 错误的类型不止这一种,但是都是因为内容里面包含转义字符单引号引起 ...
Shell中单引号(‘‘) 双引号(““) 反引号(``) $() 的区别
字符串与引号 Shell 的模型就是标准的字符流过滤器模型,简单来说,就是一条命令把结果送到标准输出,这个标准输出被连接到下一个命令的标准输入,由此来实现一系列命令之间的联动. 每一个命令的输出都是 ...
Php中单引号双引号包含字符串的区别是,PHP中的单引号和双引号字符串有什么区别？...
回答(11) 2 years ago PHP strings不仅可以用两种方式指定,而且可以用 four 方式指定 . Single quoted strings几乎完全显示事物"as is ...
单引号, 双引号,反引号的区别
单引号, 双引号,反引号的区别区别: 区别: 单引号: 所见即所得里面的内容会原封不动显示出来双引号: 会解析里面的变量和特殊符号反引号: 反引号里面的内容会被优先执行 [root@alice ...
Tip#66:你知道吗？如何在输入属性值时自动插入双引号
如果你愿意在HTML Editor中输入属性值时自动加入双引号. 设置选项菜单 Tools->Options. 选 Show all settings. 从左边框中选择 Text Editor ...
小白爬坑记：C语言学习点滴——我对单、双引号的理解
小白爬坑记:C语言学习点滴--我对单.双引号的理解一.单引号的作用: 二.双引号的作用: 三.字符或字符串容易犯的错误: 三.做个小题: 一.单引号的作用: 将单引号中间的所有符号直接转换为ASCI ...
LaTeX如何正确输入引号:双引号“”单引号‘’
最近看一些latex用户的文章,输入的双引号和单引号都是用输入法中的中文模式键入,并不是LaTeX的正确输入方式. 正确的输入方法如下: 使用键盘的 Tab键上侧的LaTeX技巧218:LaTeX如何 ...
php中单引号双引号的区别,PHP中单引号与双引号的区别
一.引号定义字符串在PHP中,通常一个字符串被定义在一对引号中,如: 'I am a string in single quotes' "I am a string in double q ...
Linux中单引号双引号的区别与用法
1.单引号单引号将其中的内容都作为了字符串来,忽略所有的命令和特殊字符,类似于一个字符串的用法 echo 'This is a string' >>> This is a stri ...

jQuery自定义的属性内容包含单引号、双引号，页面显示异常

一、场景

二、解决

三、代码

jQuery自定义的属性内容包含单引号、双引号，页面显示异常相关推荐

最新文章

热门文章