我無法使用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>