我无法使用jquery选择字体真棒元素

Question

在第36行中完成代码JAVASCRIPT是发行部分https://jsfiddle.net/ybp7gtup/7/

我想使用js或jquery更改图标的颜色，因为我正在使用表单验证来更改用户行为的颜色。 我似乎无法在DOM中选择<i> ，有人可以建议吗？

HTML：

<div class="col-xs-1 col-md-1 icons-div">
        <div class="row">
            <i class="fa fa-user fa-color"></i>
         </div>
 </div>

CSS：

select:invalid {
    outline: none;
    box-shadow: 0 0 5px red;
}

select:valid {
    outline: none;
    box-shadow: 0 0 5px #449d44;
}

.fa {
    font-size: 3em;
}

.fa-calendar {
    font-size: 2.5em;
}

.hide-div .fa {
    font-size: 1em;
}

.red {
    color: #FFA5A5;
}

.green {
    color: #449d44;
}

jQuery的：

$('.fa-color').addClass('red');

Answer 1

您认为jQuery无法正常工作的假设是错误的。 您的问题是，当选择器同时具有fa-color和red类时，选择器（最有可能）比在元素上应用color属性的选择器弱。 这应该工作：

.fa-color.red {
    color: #FFA5A5;
}

Answer 2

尝试编辑fa-color类（无需使用jquery）

.fa-color{
   color: #FFA5A5 !important;
}

Answer 3

只需添加一个ID。 和

<div class="col-xs-1 col-md-1 icons-div">
    <div class="row">
        <i class="fa fa-user" id = "color_guy"></i>
     </div>
</div>

然后用jQuery：

$(document).ready(function() {
    $('#color_guy').addClass('red');
)};

这应该工作！

Answer 4

这很奇怪，但是jquery不会随机选择某些元素（或者这似乎正在发生）。 普通的js会选择该元素，而我只是几次尝试，但是在一种情况下，我真的很想使用jQuery的toggle（）。 我什至不知道如何搜索答案，直到我意识到这根本不是随机的，但是在jQuery失败的情况下，字体总是很棒（但不会产生错误）。

经过一整天的努力后，我偶然发现了这篇似乎可以解决此问题的文章。 听起来真棒字体正在影响元素中的某些内容，这使jquery语句无法按预期方式工作。 我相信本文中给出的解决方法将起作用，但是我尚未对其进行测试。

https://fontawesome.com/how-to-use/on-the-web/using-with/jquery

ABE：所以，文章说font-awesome脚本使用fontawesome类（fas，fa等）查找标签，并用替换它们，因此建议添加一个额外的js引用，这将导致fontawesome将其标签嵌套在内部原始标签。 听起来像赢家，但这对我没有用。

然后，我在fontawesome的站点上找到了这篇文章，该文章显示了如何通过CSS伪元素使用fontawesome，我认为这样做可以，但是没有用。

坦白说，在这一点上，我准备使用图标图像。 我不太擅长javascript或jquery，这比看起来应该要复杂得多。

*更新*

我没有在类名选择器前添加“。”。 在jQuery中。 因此，例如，当我应该写$（'。icon'）时，我正在写$（'icon'）。 男人，一天半浪费在一个愚蠢的点上。 如果正确输入了类名选择器，则每个方法都可以正常工作。

Answer 5

在jsfiddle中测试了您的代码，它可以工作。 您可能已经忘记了将JQuery包含在文档标题中。 例如： <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>