javascript - 我无法使用 jquery 选择 Font Awesome 元素

Question

FIDDLE 行 36 JavaScript 中的完整代码是问题部分 https://jsfiddle.net/ybp7gtup/7/

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

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

j查询:

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

Answer 1

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

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