jQuery 更改 FontAwesome CSS 不起作用？答案

【问题标题】：jQuery to change FontAwesome CSS not working?jQuery 更改 FontAwesome CSS 不起作用？
【发布时间】：2018-10-09 19:44:41
【问题描述】：

我有一个 MVC 项目，我正在使用 Ajax 更新包含 FontAwesome 5 图标的视图部分。 FontAwesome 是使用 CSS 类设置的，所以我假设我可以轻松删除然后为图标添加 CSS。但是，当我尝试通过 jQuery 更改 CSS 时，CSS 永远不会设置。添加/删除类在我正在更改的常规 CSS 类上按预期工作，但在 FA 类valid-icon 上没有。

这是最初的 HTML：

@if (Model.VALID_FLAG == "Y")
{
    <div class="validation__text-success" id="valid-flag>
        <i class="fas fa-check-circle" id="valid-icon"></i> Yes
    </div>
}
else
{
    <div class="validation__text-danger" id="valid-flag>
        <i class="fas fa-times-octagon" id="valid-icon"></i> No
    </div>
}

这是来自 Ajax 调用的 jQuery。

var $html = $(response);
if ($html.hasClass('alert-success')) {
    $("#valid-flag").text('Yes');
    $("#valid-flag").removeClass().addClass('validation__text-success');
    $("#valid-icon").removeClass().addClass('fas fa-check-circle');
}
else if ($html.hasClass('alert-danger')) {
    $("#valid-flag").text('No');
    $("#valid-flag").removeClass().addClass('validation__text-danger');
    $("#valid-icon").removeClass().addClass('fas fa-times-octagon');
}

【问题讨论】：

另外，text() 替换了所有内容，包括图标元素。
添加 HTML sn-p 只是为了帮助理解我在做什么。第二个 sn-p 是 Ajax，它查看响应，将其读取为 HTML，然后在返回的 alert-success 或 alert-danger 的 HTML 中查找 Bootstrap 类。根据找到的类，jQuery 应该确定我在页面的另一部分显示的文本和图标。
@showdev，啊哈....这可能就是这样做的。当我检查元素时， FontAwesome 的标记只是丢失了，所以它使你说 text() 替换了它。我尝试添加 标记及其对应的 FA 类，但它只是显示为原始 HTML。这就是让我重新尝试仅更改 FA 图标的 CSS 类的原因。
我要求 HTML 主要是因为我怀疑您的脚本可以简化。如果您只想发布 $html 的渲染标记，我们可以看看。
@showdev，使用 html() 有效。我应该知道那个。我没有意识到 text() 只用文本替换了所有内容，所以这对将来的内容很有帮助。

标签： jquery css font-awesome font-awesome-5

【解决方案1】：

text() method 替换所有文本内容，包括图标元素。
您似乎选择了html() 同时替换图标元素和文本标签。

另一种替代解决方案是修改元素的特定文本节点，使用contents()。
我在charlietfl 的this answer 中发现了这个想法。

请注意，在下面的示例中，重复的 ID 被添加到页面中。但这仅用于演示，因为您无法更改响应返回的 HTML 代码。

var response = [
  `<div class="alert-success" id="valid-flag">
     <i class="fas" id="valid-icon"></i> ???
   </div>`,
  `<div class="alert-danger" id="valid-flag">
     <i class="fas" id="valid-icon"></i> ???
   </div>`
];

function processResponse(response) {

  var $html = $(response);

  if ($html.hasClass('alert-success')) {

    $html.contents().last()[0].textContent = 'Yes';
    $html.removeClass().addClass('validation__text-success');
    $('#valid-icon', $html).removeClass().addClass('fas fa-check-circle');

  } else if ($html.hasClass('alert-danger')) {

    $html.contents().last()[0].textContent = 'No';
    $html.removeClass().addClass('validation__text-danger');
    $('#valid-icon', $html).removeClass().addClass('fas fa-frown');

  }

  $('body').append($html);

}


$.each(response, function(i, v) {
  processResponse(v);
});

.validation__text-success {
  background-color: lightgreen;
}

.validation__text-danger {
  background-color: pink;
}

#valid-icon {
  margin: 0 .5em 0 0;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

我其实只是用了下面的 $("#valid-flag").html(' No');或 $("#valid-flag").html(' Yes');