读取 jQuery 中的特殊字符

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

您不能使用 jQuery 直接影响伪元素。您也不应该在 <style> 元素中使用纯文本将样式规则注入页面。这是一个非常非常 hacky 的解决方案，而且还有更好的解决方案。

例如，您可以简单地将 class 添加到所需的父元素，然后挂钩 CSS 规则以根据 class 更改图标，如下所示：

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

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

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

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

Answer 3

为什么不是简单的方法？

单击元素时添加 class 和 javascript。这就是你需要用 javascript.

做的全部

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

并在您的 CSS 中添加。

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

因为 CSS 更改了样式，所以保留它。

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

读取 jQuery 中的特殊字符

Read special character in jQuery

javascript

jquery

special-characters