Question

我正在使用字体真棒图标并将其用作：

#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'}");
});

如果我在content属性中使用一些简单的文本，这段代码效果很好，但是当我尝试添加另一个fa-icon短码时，它什么也没做。

据我所知，问题出现在"\"字符中。

如何在jQuery中使用它"\"？

Answer 1

您需要使用其他\来逃避\：

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

Answer 2

为什么不是简单的方法？

单击元素时添加带有javascript的类。这就是你需要用javascript做的一切。

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

并在你的CSS中添加。

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

原因CSS会更改样式，因此请将其保留在那里。

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

Answer 3

使用jQuery不能直接影响pseduo元素。您也不应该使用<style>元素中的纯文本将样式规则注入页面。它是一个真正非常糟糕的解决方案，并且可用得更好。

例如，您只需向所需的父元素添加class，然后挂钩您的CSS规则即可根据该类更改图标，如下所示：

＆＃13;

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

＆＃13;

#header > nav > a[href="#menu"]::before {
  font-family: FontAwesome;
  content: "\f0c9";
}

#header > nav > a[href="#menu"].active::before {
  font-family: FontAwesome;
  content: "\f00d";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div id="header">
  <nav>
    <a href="#menu">Menu</a>
  </nav>
</div>

<p>
  <button id="three_rows">Click me</button> 
</p>

＆＃13;

在jQuery中读取特殊字符

3 个答案: