jquery，如何使用jquery添加HTML hex图标类？

Question

我正在尝试使用jquery添加样式，该样式包含ascii图标 css课程：

.plusIcon:before {
content: "\2b";}
.minusIcon:before {
content: "\2212";}

当我从样式表加载样式时，它可以正常工作： 加上图标内容是＆＃34; \ 2b＆＃34; （显示＆＃34; +＆＃34;在html页面上）和减号图标内容是＆＃34; \ 2212＆＃34; （显示＆＃34; - ＆＃34;在html页面上）

，但是当我使用jquery加载css样式时，内容会发生变化

jquery代码：

var css = '.minusIcon:before {content: "\2212";}.plusIcon:before {content: "\2b";}'
jQuery('head').append('<style>' + css + '</style>')

标签已添加到我的html页面，但课程内容已更改为： 加上图标内容是＆＃34; 2b＆＃34; （显示＆＃34; 2b＆＃34;在html页面上）和减号图标内容是＆＃34; 2＆＃34; （显示＆＃34; 2＆＃34;在html页面上）

有没有办法用jquery添加这种样式，以便显示那些图标？

提前致谢

Answer 1

请查看以下更改。无论何时通过JS字符串处理它们，都需要使用双反斜杠转义单个反斜杠：

＆＃13;

＆＃13;

var css = '.minusIcon:before {content: "\\2212";}.plusIcon:before {content: "\\2b";}'
jQuery('head').append('<style>' + css + '</style>')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="minusIcon"></span>
</br>
<span class="plusIcon"></span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Check this fiddle here

你可以使用Jquery的 addClass（）函数来做到这一点。它很容易使用，

（首先包括Jquery）

您的HTML

<div id="div1"></div>
<div id="div2"></div>

您的CSS

div{
    display:inline-block;
    text-align:center;
    padding:20px;
    background:#FFF}

.plusIcon:before {
    content: "\2b";
    font-size:30px;}

.minusIcon:before {
    content: "\2212"; 
    font-size:30px;}

你的Jquery

$("#div1").addClass("plusIcon");
$("#div2").addClass("minusIcon");