Javascript 读取jQuery中的特殊字符

我正在使用字体很棒的图标，并将其用作：

#header > nav > a[href="#menu"]::before {
    content: '\f0c9';
}

我想编写一些代码，在单击后将此图标更改为另一个：

var style = $('<style />').appendTo('head');
$("#three_rows").click(function() {
    style.text("#header>nav>a[href='#menu']:before{content:'\f00d'}");
});

var style=$（''）.appendTo（'head'）；
$（“#三行”）。单击（函数（）{
style.text（“#header>nav>a[href='#menu']：在{content:'\f00d'}之前”）；
});

如果我在

content

属性中使用一些简单的文本，这段代码效果很好，但是当我尝试放置另一个fa图标快捷码时，它什么也没做

据我所知，问题出在

“\”

字符中

---

如何在jQuery中使用它？

您需要使用另一个

\

来转义

\

：

var style = $('<style />').appendTo('head');
$("#three_rows").click(function() {
    style.text("#header>nav>a[href='#menu']:before{content:'\\f00d'}");
});

var style=$（''）.appendTo（'head'）；
$（“#三行”）。单击（函数（）{
style.text（“#header>nav>a[href='#menu']：在{content:'\\f00d'之前”）；
});

您需要使用另一个

\

来转义

\

：

var style = $('<style />').appendTo('head');
$("#three_rows").click(function() {
    style.text("#header>nav>a[href='#menu']:before{content:'\\f00d'}");
});

var style=$（''）.appendTo（'head'）；
$（“#三行”）。单击（函数（）{
style.text（“#header>nav>a[href='#menu']：在{content:'\\f00d'之前”）；
});

使用jQuery不能直接影响psedoo元素。您也不应该在

元素中使用纯文本将样式规则注入页面。这是一个非常非常骇人的解决方案，而且有更好的解决方案

例如，您可以简单地向所需的父元素添加一个

类

，然后钩住CSS规则以基于该类更改图标，如下所示：

$（“#三行”）。单击（函数（）{
$（'#header>nav>a[href=“#menu”]”）。addClass（'active'）；
});
#header>nav>a[href=“#菜单”]：：之前{
字体系列：Fontsome；
内容：“\f0c9”；
}
#标题>导航>a[href=“#菜单”]。活动：：之前{
字体系列：Fontsome；
内容：“\f00d”；
}


点击我
使用jQuery不能直接影响psedoo元素。您也不应该在
元素中使用纯文本将样式规则注入页面。这是一个非常非常骇人的解决方案，而且有更好的解决方案

例如，您可以简单地向所需的父元素添加一个
类
，然后钩住CSS规则以基于该类更改图标，如下所示：


$（“#三行”）。单击（函数（）{
$（'#header>nav>a[href=“#menu”]”）。addClass（'active'）；
});
#header>nav>a[href=“#菜单”]：：之前{
字体系列：Fontsome；
内容：“\f0c9”；
}
#标题>导航>a[href=“#菜单”]。活动：：之前{
字体系列：Fontsome；
内容：“\f00d”；
}


点击我
为什么不是简单的方法

单击元素时，使用javascript添加一个类。
这就是使用javascript所需要做的一切

$("#three_rows").click(function() {
    $("#header>nav>a[href='#menu']").addClass('blubb');
});

并在CSS中添加

#header > nav > a[href="#menu"].blubb::before {
    content: '\f00d';
}

因为CSS会改变样式，所以请保持不变

当然，您可以将类名更改为更有意义的名称。
为什么不是简单的方法

单击元素时，使用javascript添加一个类。
这就是使用javascript所需要做的一切

$("#three_rows").click(function() {
    $("#header>nav>a[href='#menu']").addClass('blubb');
});

并在CSS中添加

#header > nav > a[href="#menu"].blubb::before {
    content: '\f00d';
}

因为CSS会改变样式，所以请保持不变

当然，您可以将类名更改为更有意义的名称