我可以't使用jquery选择字体真棒元素

I can't select font-awesome element using jquery

本文关键字：字体 选择 元素 jquery 使用 我可以      更新时间：2023-09-26

FIDDLE第36行中的完整代码Java脚本是发布部分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');

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

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

尝试使用编辑fa颜色类（无需使用jquery）

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

只需添加一个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');
)};

这应该有效！

这很奇怪，但jquery不会随机选择某些元素（或者这就是出现的）。普通的js会选择元素，有几次我只是继续努力，但有一次我真的想使用jQuery的toggle（）。我甚至不知道如何搜索答案，直到我意识到这根本不是随机的，但总是在jQuery失败（但没有产生错误）的地方使用很棒的类。

在纠结了一整天之后，我偶然发现了这篇似乎是针对这个问题的文章。听起来字体真棒影响了元素中的某些内容，这使得jquery语句无法按预期工作。我相信文章中给出的解决方案是可行的，但我还没有测试它们。

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

ABE：因此，这篇文章说，字体真棒脚本找到了带有字体真棒类（fas、fa等）的标签，并用替换它们，因此它建议添加一个额外的js引用，使字体真棒将标签嵌套在原始标签中。听起来像是赢家，但对我来说并不奏效。

然后我在fontwo敬畏的网站上找到了这篇文章，展示了如何通过css伪元素使用fontwo敬畏，我认为这会奏效，但事实并非如此。

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

*更新*

在jQuery中，我没有在类名选择器前面加上"."。例如，我在写$（'icon'），而我本该写$（'.icon'）。如果正确键入类名选择器，则EVERY方法可以正常工作。

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

相关文章：